1

我创建了一个非常简单的轮播来循环遍历一组 div，但我现在有点卡住了……在这种情况下，您可以再次导航slide 01，slide 07然后再返回，理想情况下，我希望轮播循环，因此在slide 07你得到slide 01. 我不使用轮播插件的原因（正如你可能建议的那样）是我想要一个悬垂，因此当你在上面时，slide 01你可以看到slide 07左边 50px 和slide 02右边 50px 。
在此处查看我的 jsFiddle 演示：http: //jsfiddle.net/neal_fletcher/BBXnP/3/

HTML：

<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 回答