1

一連の div を循環する非常に単純なカルーセルを作成しましたが、今は少し行き詰まっています...この場合、カルーセルをループslide 01さslide 07せたいと思っています。したがって、slide 07取得した後slide 01。ただし、カルーセル プラグインを使用していない理由 (ご指摘のとおり) は、オーバーハングが必要なためです。したがって、オンにすると、左側に 50 ピクセル、右側に 50 ピクセルがslide 01表示されます。 ここで私の jsFiddle デモを参照してください: http://jsfiddle.net/neal_fletcher/BBXnP/3/ HTML:slide 07slide 02


<div class="outerwrapper">
    <div class="innerwrapper">
        <div class="inner-slide">SLIDE 01</div>
        <div class="inner-slide">SLIDE 02</div>
        <div class="inner-slide">SLIDE 03</div>
        <div class="inner-slide">SLIDE 04</div>
        <div class="inner-slide">SLIDE 05</div>
        <div class="inner-slide">SLIDE 06</div>
        <div class="inner-slide">SLIDE 07</div>
    </div>
</div>

<div id="left">LEFT</div>
<div id="right">RIGHT</div>

jQuery:

$(function () {

    var animating = false,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        if (animating) {
            return;
        }
        var dir = (this.id === "right") ? '+=' : '-=',
            width = $(".inner-slide").width();
        animating = true;
        outerwrap.animate({
            scrollLeft: dir + width
        }, 600, function () {
            animating = false;
        });
    });

});

参考までに、最終的には BBC のホームページのスライダー ( http://www.bbc.co.uk ) のように機能します。このスライダーでは、次のセクションと前のセクションが下に表示されます。
どんな提案でも大歓迎です！

4

2 に答える 2

3

これは決して完璧ではありませんが、どこに行くべきかについての一般的な考えを与えるかもしれません. また、自由にコードをいくつかのセクションに分割しました。

基本的な考え方は、最初の 2 つと最後の 2 つを複製して、リストの両端に配置することです。

見てみな

変数を初期化します。

var animating = false,
    slideWidth = $('.inner-slide').width(),
    $wrapper = $('.outerwrapper'),
    slideIndex = 2,
    slideLen = $('.inner-slide').length,

基本的なフレームワークを構築します。

    build = function() {
        $firstClone = $('.inner-slide').eq(0).clone();
        $secondClone = $('.inner-slide').eq(1).clone();
        $preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
        $lastClone = $('.inner-slide').eq(slideLen - 1).clone();
        $wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
        $wrapper.animate({
            scrollLeft: '+=' + slideWidth * slideIndex + 'px'
        }, 0);
    },

ラッパーをスライドさせる機能

    slide = function(dir, speed) {
        if(!animating) {
            animating = true;
            dir == 'right' ? slideIndex++ : slideIndex--;
            slideIndex == slideLen - 1 ? slideIndex == 0 : '';

            if(slideIndex == 0 && dir == 'left') {
                //if the slide is at the beginning and going left

                slideIndex = slideLen + 1;                
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function() {
                    animating = false;    
                });
                slideIndex--;

            } else if(slideIndex == slideLen + 2 && dir == 'right') {
                //if the slide is at the end and going right

                slideIndex = 1;                
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function() {
                    animating = false;    
                });
                slideIndex++;

            }
            $wrapper.animate({
                scrollLeft: slideIndex * slideWidth + 'px'
            }, speed, function() {
                animating = false;    
            });
        }
    };

実際の実行:

$(function() {
    build();
    $('#right, #left').on('click', function() {
        slide($(this).attr('id'), 600)
    });
});

もっと良い方法があると思いますが、これが始まりです！

于 2013-10-01T21:41:11.957 に答える
1

おそらくご存知でしょうが、.append() および .prepend() メソッドを見てください。

コード：

$('.innerwrapper').append($('.inner-slide').eq(0));

最初のスライドを「innerwrapper」divの最後の位置に移動します（コピーではありません！）。

$('.innerwrapper').prepend($('.inner-slide').eq(-1));

最後のスライドを最初の位置に移動します。

乾杯！

于 2013-10-01T21:40:09.413 に答える