0

私は現在、1つのJクエリスライダーを作成しています.nextをクリックすると右から左にスライドし、prevをクリックすると左から右にスライドします。画像は制限されているため、前の画像が循環的に表示されます。問題は、クリック時の前と次のボタンが正しく機能しないことです。私はそれに対する最善の解決策を見つけることができません。誰かがそれを書くための最良の方法を教えてくれますか? または、スライダープラグインを使用せずにそのようなスライダーを作成する効果的な手法はありますか?

JQuery コード

$(document).ready(function(){    
var galW =  $('#gallery').width();  
var imgN = $('#slider img').length;
$("#slider").width((galW/6)*imgN);
$('#next').click(function(){    
    var first = $("#slider img").first();
    var last = $("#slider img").last();
    first.stop().animate({marginLeft : -150},1500,function(){
first.detach().insertAfter(last).css('marginLeft','0px');
});
});

$('#prev').click(function(){
        var first = $("#slider img").first();
    var last = $("#slider img").last();
    last.detach().insertBefore(first).css('marginLeft','-150px');
    first.stop().animate({marginLeft : 0},1500);
});
});

HTML コード

<div id="gallery">
            <div id="gallery_overflow">
                <div id="slider">
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>

                </div>
            </div>
            <div id="prev"><img src="left.png" width="40px" height="40px"/></div>
            <div id="next"><img src="right.png" width="40px" height="40px"/></div>
        </div>

画像は # か所にあります ..

4

1 に答える 1

0

コードにいくつかの変更を加えて、次のように機能させることができます(画像のリンクをサポートするには、下のEDIT部分を参照してください)。

CSS

#gallery{
    overflow:hidden;
}
#slider {
    white-space:nowrap;
}
#slider img {
     margin-left:5px; 
}

JS

$(document).ready(function () {

    var galW = $('#gallery').width();
    var imgN = $('#slider img').length;
    var sliding = false;
    $("#slider").width((galW / 6) * imgN);
    $('#next').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider img").first();
        var last = $("#slider img").last();
        var defaultMarginLeft = first.css("margin-left");
        first.animate({
            marginLeft: (-1*first.width())
        }, 1500, function () {
            first.detach().insertAfter(last).css('marginLeft', defaultMarginLeft);
            sliding = false;
        });
    });

    $('#prev').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider img").first();
        var last = $("#slider img").last();
        var defaultMarginLeft = first.css("margin-left");
        last.detach().insertBefore(first).css('marginLeft', (-1*first.width()));
        first = $("#slider img").first();
        first.animate({
            marginLeft: defaultMarginLeft
        }, 1500,function(){sliding=false;});
    });

});

http://jsfiddle.net/2dwsW/

編集

プレースホルダーとしてスパン要素を使用する別の実装(実際には、セレクターで使用されているのはクラスプレースホルダーであるため、このクラス名を持つスパンの代わりに任意のインライン ブロック要素を使用できます)画像のリンクを適切にサポートし、任意の要素が必要です。

CSS

#gallery{
    overflow:hidden;
}
#slider {
    white-space:nowrap;
}
#slider .placeholder {
     margin-left:5px; 
}

JS

$(document).ready(function () {

    var galW = $('#gallery').width();
    var imgN = $('#slider .placeholder').length;
    var sliding = false;
    $("#slider").width((galW / 6) * imgN);
    $('#next').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider .placeholder").first();
        var last = $("#slider .placeholder").last();
        var defaultMarginLeft = first.css("margin-left");
        first.animate({
            marginLeft: (-1*first.width())
        }, 1500, function () {
            first.detach().insertAfter(last).css('marginLeft', defaultMarginLeft);
            sliding = false;
        });
    });

    $('#prev').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider .placeholder").first();
        var last = $("#slider .placeholder").last();
        var defaultMarginLeft = first.css("margin-left");
        last.detach().insertBefore(first).css('marginLeft', (-1*first.width()));
        first = $("#slider .placeholder").first();
        first.animate({
            marginLeft: defaultMarginLeft
        }, 1500,function(){sliding=false;});
    });

});

HTML

<div id="gallery">
    <div id="gallery_overflow">
        <div id="slider">
            <span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span>
        </div>
    </div>
    <div id="prev">PREV</div>
    <div id="next">NEXT</div>
</div>

http://jsfiddle.net/2dwsW/1/

于 2013-10-20T13:18:19.897 に答える