Javascript jQuery：循环连续div传送带_Javascript_Jquery_Html_Css

Javascript jQuery：循环连续div传送带

javascript jquery html css

Javascript jQuery：循环连续div传送带,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经创建了一个非常简单的旋转木马，可以在一组div之间循环，但是我现在有点卡住了……在这种情况下，您可以从slide 01导航到slide 07，然后再返回，理想情况下，我希望旋转木马能够循环，因此在slide 07之后，您将获得slide 01。我不使用旋转木马插件的原因（正如你所建议的）是我想要一个外挂，因此当你在幻灯片01上时，你可以在左边看到幻灯片07的50px，在右边看到幻灯片02的50px。请参见我的JSFIDLE演示： HTML: 仅供参考，最后，它将有点像BBC主页滑块：在

我已经创建了一个非常简单的旋转木马，可以在一组div之间循环，但是我现在有点卡住了……在这种情况下，您可以从

slide 01

导航到

slide 07

，然后再返回，理想情况下，我希望旋转木马能够循环，因此在

slide 07

之后，您将获得

slide 01

。我不使用旋转木马插件的原因（正如你所建议的）是我想要一个外挂，因此当你在

幻灯片01

上时，你可以在左边看到

幻灯片07

的50px，在右边看到

幻灯片02

的50px。
请参见我的JSFIDLE演示：

HTML:

仅供参考，最后，它将有点像BBC主页滑块：在这里，您可以看到下面的下一节和上一节。

如有任何建议，将不胜感激

您可能知道，但请看一下.append（）和.prepend（）方法

代码：

将第一张幻灯片移动（不是复制！）到“innerwrapper”div中的最后一个位置，并：

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

干杯

您可能知道，但请看一下.append（）和.prepend（）方法

代码：

将第一张幻灯片移动（不是复制！）到“innerwrapper”div中的最后一个位置，并：

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

干杯

这绝非十全十美，但它可能会让你大致知道该去哪里。此外，我还将您的代码分成了一些部分

基本思想是克隆前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)
    });
});

我相信有更好的方法，但这只是一个开始