1

下面的代码正确地将第一张图片交换到第二张图片，但不会继续到 3 和 4 并重新开始。

= function () {

    var $active = $('#challengeTwoImageJq .carouselImagejQueryActive');
    var $next = ($('#challengeTwoImageJq .carouselImagejQueryActive').next().length > 0) ? $('#challengeTwoImageJq .carouselImagejQueryActive').next() : $('#challengeTwoImageJq img:first');
    timer = setInterval(function () {

        $active.removeClass('carouselImagejQueryActive');
        $next.fadeIn().addClass('carouselImagejQueryActive');

    }, 3000);


    timer = setInterval('challengeTwoJquery()', 3000);

}

HTML

<div id='challengeTwoImageJq' class='sectionChallengeCarouselImage'>
    <img id='imgq1' imgn='1' class='carouselImage carouselImagejQueryActive' src='img/image1.jpg'/>
    <img id='imgq2' imgn='2' class='carouselImage' src='img/image2.jpg'/>
    <img id='imgq3' imgn='3' class='carouselImage' src='img/image3.jpg'/>
    <img id='imgq4' imgn='4' class='carouselImage' src='img/image4.jpg'/>
</div>
4

1 回答 1

1

如果您只是想让它们显示/循环，您可以这样做：

function runem() {
    var allofEm = $('#challengeTwoImageJq img');
    var $active = allofEm.eq(0);
    $active.show();
    var $next = $active.next();
    var timer = setInterval(function() {
        $next.fadeIn();
        $active.hide();
        $active = $next;
        $next = (allofEm.last().index() == allofEm.index($active)) ?
            $next = allofEm.eq(0):$active.next();

    }, 3000);
}
runem();

不过，您也许可以将其简化一些。除非你真的想要它，否则你不需要这个功能。

编辑：为了清楚起见，我在一开始就假设这个 CSS：

#challengeTwoImageJq img {display:none;}

在这里看到它的实际效果：http: //jsfiddle.net/8Mp7T/

于 2012-06-27T17:38:52.510 回答