Jquery:小幻灯片,如何为下一张幻灯片创建一个var以在顶部淡入,以及setInterval的问题

nfeuvbwi  于 11个月前  发布在  jQuery
关注(0)|答案(1)|浏览(146)

http://jsfiddle.net/nicktheandroid/B7Rhe/5/
我正在尝试使下一张幻灯片淡入当前幻灯片,而不是在淡入下一张幻灯片之前淡出所有幻灯片。我想不通
另外,请注意我注解掉的内容。我尝试将其作为一个函数,然后在该函数上调用setInterval,但它不起作用,所以我只是围绕函数本身调用setInterval,而不是在setinterval内部调用函数。
任何帮助或建议都非常感谢。

var x = 2;
console.log('Not broken');

setInterval(function() {
// function slideshow() {
    var m = $('.slideshow li').size();
    x += 1;
    if (x > m) {
        x = 1;
    }
    $(".slideshow ul li:nth-child(" + (x) + ")").animate({
        opacity: 1
    });
    $(".slideshow ul li:nth-child(n)").animate({
        opacity: 0
    });
    $(".slideshow ul li:nth-child(" + (x) + ")").animate({
        opacity: 1
    });
// }
}, 2000);

//setInterval("slideshow()", 1000);
cwxwcias

cwxwcias1#

你的问题是:

$(".slideshow ul li:nth-child(n)")

:nth-child(n)只匹配所有内容,传递n等于根本不包含该选择器。所以问题是,你淡出了所有的元素,然后又淡入了一个。你只需要淡出可见的一个。把它改成这样:

$(".slideshow ul li:visible")

另一个小改动。在初始加载时,您会显示所有图像,因此它们都将隐藏。你应该在加载时隐藏除可见部分以外的所有部分,这样它才能在第一个循环中工作。

相关问题