1

以下のコードは、最初の写真を 2 番目の写真に正しくスワップしますが、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 に答える