Question

下面的代码正确地将第一张图片交换到第二张图片，但没有继续到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>

Answer 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/

jQuery定时重复幻灯片

1 个答案: