为什么在使用JQuery时这些图像无法循环显示？

Question

I am trying to cycle through 3 images, stacked on top of one another. The jQuery I am using does not have any effect on the images and I cannot see what the problem is. I'd really love some help! Cheers!!

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

Change this:

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

to that:

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

in your code you are trying to find element with id="cycler" AND class="active" which is wrong

Also try to pass function to a setInterval instead of a string

setInterval(cycleImages,2000);

See jSfiddle http://jsfiddle.net/ygV3z/

Answer 2

For sure this is wrong: $('#cycler.active');

You should have $('#cycler .active'); since .active is descendant of #cycler . Your selector is looking for a element with id = cycler that also have active class assigned.

Answer 3

You have made a typo in your CSS selector. Just fix it by changing this:

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

into the following:

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

Answer 4

JQuery has an each method that could help you cycle through DOM elements:

$("#cycler img").each(function(key, obj) {
   // fetch the arguments passed
   var args = arguments;
   // get a jquery accessible form of each object
   var obj = $(obj);
   // do stuff
}); 

You can match on names or classes, or even the attributes if they are the same. I'm sure better skilled folks could tell you if 1 is faster than the other, but the notation for attributes would be $("#cycler [data-pick='true']") to match each image within #cycler that is defined as follows: <img src="..." data-pick="true" /> .

Hope this helps.

Answer 5

As everyone here has said, you need a space between your CSS selectors to denote that you want descendants. Also, you need to use :first-child , not :first .

Also, you can not pass a string into setTimeout() . Furthermore, setTimeout() expects an actual callback function in its first argument, not what that function returns . What you're doing is very similar to this:

function looper() {
    $(this).hide();
}
$("img").each("looper()");

That doesn't make any sense, does it?

Now, the fixed code:

function cycleImages(){
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first-child');
    $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);
})

Here's the fiddle: http://jsfiddle.net/NobleMushtak/L4D7r/