javascript - 为什么这些图像在使用 JQuery 时没有循环显示？

Question

我正在尝试循环浏览 3 张图片，一张一张堆叠在一起。我使用的 jQuery 对图像没有任何影响，我看不出问题出在哪里。我真的很想得到一些帮助!干杯!

HTML:

        <div id="cycler">
        <img class="active" src="images/dubcity4.jpg" alt="my image"/>
        <img src="images/dubcity2.jpg" alt="my image"/>
        <img src="images/dubcity3.jpg" alt="my image"/>
        </div>

CSS:

      #cycler{position:relative;}
      #cycler img{position:absolute;z-index:1}
      #cycler img.active{z-index:3}

JavaScript:

function cycleImages(){
    var $active = $('#cycler.active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
    $next.css('z-index', 2);
    $active.fadeOut(1500, function(){
        $active.css('z-index',1).show().removeClass('active');
        $next.css('z-index',3).addClass('active');
    });
}
$(document).ready(function(){
    setInterval('cycleImages()',2000);
})

Answer 1

改变这个:

var $active = $('#cycler.active');

对此:

var $active = $('#cycler .active');

在您的代码中，您试图找到带有 id="cycler"和 class="active"的元素，这是错误的

还尝试将函数传递给 setInterval 而不是字符串

setInterval(cycleImages,2000);

参见 jSfiddle http://jsfiddle.net/ygV3z/