Question

我已经创建了一个非常简单的旋转木马来循环显示一组div，我现在有点卡住了......在这种情况下，你可以从slide 01导航到slide 07然后再回来，理想情况下我喜欢旋转木马循环，因此在slide 07之后你得到slide 01。我之所以没有使用旋转木马插件（因为你可能会建议）的原因是我想要一个悬臂，所以当你在slide 01时，你可以在左边看到50px的slide 07和右边50px的slide 02 在这里查看我的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您可以在其中看到下一部分和上一部分。
任何建议将不胜感激！

Answer 1

这绝不是完美的，但它可能会让你大致了解去哪里。此外，我冒昧地将您的代码分成几个部分。

基本思想是克隆前2和后2并将它们放在列表的两端。

Check it out

初始化变量：

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)
    });
});

我确定有更好的方法可以做到，但这是一个开始！

Answer 2

你可以理解它，但看看.append（）和.prepend（）方法。

代码：

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

将第一张幻灯片移动（不复制！）到＆＃34; innerwrapper＆＃34;中的最后一个位置div和：

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

将最后一张幻灯片移到第一个位置。

干杯！

jQuery：循环连续div轮播

2 个答案: