1

jqueryで小さなスライドショーを作りたいと思います。最初の問題：「次のクリック機能」しかない場合、画像が次々と正しく表示されます。しかし、「前へ」機能を使用すると、次のボタンが機能しなくなります。もう1つの問題：スライドショーは、最後の画像の後にある[次のボタン]をクリックして、最初の画像から再開する必要があります。多分誰かがアイデアを持っています。前もって感謝します。

         $("#next").click(function(){
            if($("#gallery li").next("#gallery li").length != 0) {
                var next = $(".toppicture").parent("li").next().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(next).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

        $("#prev").click(function(){
            if($("#gallery li").prev("#gallery li").length != 0) {
                var prev = $(".toppicture").parent("li").prev().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(prev).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

IDが「gallery」の「ul」は次のようになります。

    <li>
<img class="toppicture" src="images/w1.jpg" title="Title #0"/>
    </li>
    <li>
<img  src="images/w2.jpg" title="Title #1"/>
    </li>
    <li>
<img  src="images/w3.jpg" title="Title #2"/>
    </li>
4

2 に答える 2

0

これは最も単純なスライダーではありませんが、最も理解しやすいと思います。jsFiddle

HTML：

<ul id="gallery">
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li>
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li>
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li>
</ul>
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a>

JS：

function loadSlide(index){
    $('#gallery li').hide()
        .eq(index).show();
}

$('#gallery').data('index',0).find('li').hide();
loadSlide(0);

$('#next').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + 1) % numSlides;    
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();            
});
$('#previous').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + numSlides - 1) % numSlides;
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();
});

.next()役割を分離することにより、（大失敗のような）多くのトラバーサルを回避します。

  • スライドの変更は関数によって行われ、数値を取り、そのスライドを表示します。

  • 現在のスライド番号は、を使用してギャラリー自体に保存されます.data()

  • 次と前のボタンは、現在のスライドを取得し、その数を適切にデクリメントしてから、スライドチェンジャーを呼び出す必要があります。

このようにして、特定の領域を簡単に拡張できます。移行したいですか？スライドチェンジャーに入れます。スライドを自動進行させたいですか？スライドチェンジャーを呼び出すタイマーを設定します。

このソリューションをフル機能のスライダーと区別する唯一の点は、通常、すべてを一緒にカプセル化し、スライドを変更する関数ではなくカスタムイベントを使用することです。必要に応じて、この例を少し拡張して違いを示したいと思います。

于 2012-02-20T00:07:23.003 に答える
0

これがjsFiddleの例です

つまり、必要なのはカルーセルのようなものです。この効果を処理するためのjQueryプラグインがいくつかあります。たとえば、Sorgalla.comのjCarouselです。

于 2012-02-20T00:17:20.610 に答える