0

画像のスライドが最後に達すると、停止します。最初からやり直そうとしましたが、実現できません。私のコードに基づいて、誰かがこれをアーカイブするのを手伝ってくれることを願っています。JQuery を使用して画像スライダーを作成する方法についていくつかのチュートリアルに従ったので、自分が書いたコードから離れたくありません (可能であれば)。これまでに見つけた解決策は、まったく異なるアイデアで書かれています。htmlコードは次のとおりです。

<body style="background-color: lightblue">
<div>
    <div id="slider" style="margin-left: auto; margin-right: auto; width: 800px; height: 800px; margin-top: 100px;">
        <img src="./images/Dogs.jpg" style="position: absolute;" class="active" />
        <img src="./images/pic.jpg" style="position: absolute;" />          
        <img src="./images/Mal.jpg" style="position: absolute;" />

    </div>
</div>

そして、これがJSコードです：

function startSlide() {
    var $current = $('div #slider img.active');
    var $next = $current.next();        

    if($current.length == 0) {
        $next = $('#slider  div:first-child');
        //This is what where the code will go I guess
    }

//  $next.addClass('active');   
    $current.removeClass('active').css({
        "opacity" : 0.0,
        "zIndex" : 2
        });
        $("#slider img").animate({opacity: 1.0}, 2000, function() {
            $next.addClass('active').css({zIndex: 1});
        });
}

だから私の質問は、スライドが最後の画像に到達したら最初からやり直すようにコードを書く方法です。そして、できればJQuery構文を維持してください よろしくお願いします

4

2 に答える 2

1

これは私にとって機能する完全なコードです。おそらくタイミングを少し調整する必要があります。

私はデビッドのヒントを使いました。

$(document).ready(function(){
    setInterval(function(){startSlide()}, 2100);
});

function startSlide() {
    var $current = $('div #slider img.active');
    var $next = $current.next();        

    if($next.length == 0) {
        $next = $('#slider :first-child');
    //make sure you don't make an empty circle
}
$current.removeClass('active');
$current.css({
    "opacity" : "0.0",
    "zIndex" : "2"
});
$next.animate({opacity: 1.0}, 2000, function() {
    $next.addClass('active').css({zIndex: 1});
});

}

また、最初に表示したくない画像に opacity:0 を追加しました。

于 2013-08-07T19:18:22.397 に答える