Jquery 如何让旋转木马四处走动？

我有一个旋转木马，如果你向左或向右走都可以。 但我希望它循环而不是单向停止。如果右箭头被点击，我已经使它循环良好。但我似乎无法解决左手的问题

脚本：

  $('.carousel-next-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        carousel.find('li').each(function (i) {
            if ($(this).position().left < w) {
                x = $(this).position().left;
            }
            if ($(this).position().left < 0) {
                carousel.animate({ scrollLeft: 0 }, 'fast');
                return false;
            }
           // alert("this position = " + $(this).position().left + ", Width = "+ w + ", x = " + x)
        });
        carousel.animate({ scrollLeft: scroll + x }, 'fast');
        return false;
    });
    $('.carousel-prev-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        carousel.find('li').each(function (i) {
            if ($(this).position().left < 1 - w)
            {
                x = $(this).position().left;
            }

            //if ($(this).position().left > 0) {
            //    carousel.animate({ scrollLeft: carousel.find('li:last').position().left }, 'fast');
            //    return ;
            //}               

        });
        if (x == 0) {
            carousel.animate({ scrollLeft: 0 }, 'fast');
        } else {
            carousel.animate({ scrollLeft: scroll + x }, 'fast');
        }
        return false;
    });

---

您可以首先将下一个和上一个方法放入它们自己的函数中：

function nextSlide() { ... }
function prevSlide() { ... }

编辑：我起初以为你想让它们自动循环。这第一步实际上并不是必需的，但会使函数易于重用

…然后给每个

.carousel

元素一个

数据-*

属性，并基于该属性进行循环：

var slideNumber = 1;

// Loop through each carousel 'slide' adding a data-slide attribute
$('.carousel ul li').each(function() {
    $(this).attr('data-slide', slideNumber++);
})

…设置当前的“初始”幻灯片：

var currentSlide = 1;

…然后在“更改幻灯片”功能中，确定下一张和上一张幻灯片（其中slideNumber现在是幻灯片总数（旋转木马中的列表项））：

…然后通过单击调用函数继续幻灯片更改

让我为这个做一个JSFiddle

---

编辑：。在动画完成之前，您需要防止单击“上一步”和“下一步”按钮，以防止其中断。

它基本上是在内联div上运行的

HTML

JS

我解决了

     $('.carousel-prev-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        var beggining = false;
        carousel.find('li').each(function (i) {
            if ($(this).position().left < 1 - w)
            {
                x = $(this).position().left;
            }         
            if ($(this).position().left == 0)
            {
                beggining = true;
            }
        });
        //alert(x);
        if (beggining) {
            carousel.animate({ scrollLeft: carousel.find('li:last').position().left }, 'fast');
            return false;
        }
        else if (x == 0) {
            carousel.animate({ scrollLeft: 0 }, 'fast');
        } else {
            carousel.animate({ scrollLeft: scroll + x }, 'fast');
        }
        return false;
    });

$（'.carousel prev page'）。单击（函数（）{
var carousel=$（this）.parents（'.carousel'）.find（'ul'）；
var scroll=carousel.scrollLeft（）；
var w=转盘宽度（）；
var x=0；
var=false；
carousel.find（'li'）。每个（功能（i）{
if（$（this）.position（）.left<1-w）
{
x=$（this）.position（）.left；
}         
if（$（this）.position（）.left==0）
{
Begging=正确；
}
});
//警报（x）；
如果（乞讨）{
动画（{scrollLeft:carousel.find（'li:last'）.position（）.left}，'fast'）；
返回false；
}
else如果（x==0）{
动画（{scrollLeft:0}，'fast'）；
}否则{
动画（{scrollLeft:scroll+x}，'fast'）；
}
返回false；
});

这是一次一张幻灯片，我当前显示6张lis？我需要显示6张图像，然后滚动到下一张6，然后滚动到下一张6，依此类推？您在最初的问题中没有说明这一点。不管怎样，我的答案在这里仍然有效。实现这一目标的最佳方法是每张幻灯片有6张图像。只需将6个图像存储在其中一个列表项中即可。抱歉，Erm列表项是动态的，如果6个图像同时单独滑出，则不符合逻辑。如果不能将每6个列表项包装在各自的列表中，那么可以使用jQuery修改HTML。然后简单地将每个列表转换为幻灯片，而不是列表项。屏幕上有一个li就可以了，但我有6个，然后所有6个移位，可以纵向不同，而不需要重新编码。我只想有人帮助解决如何只点击左键，如果你看到编辑部分，那把小提琴有6里平行线！谢谢你，我现在看到了

var currentSlide = 1;

var nextSlide = (currentSlide + 1) >= slideNumber ? 1 : currentSlide + 1;
var prevSlide = (currentSlide - 1) < 1 ? slideNumber - 1 : currentSlide - 1;

$('.carousel ul li[data-slide="' + nextSlide + '"]').css({left:'100%'});
$('.carousel ul li[data-slide="' + prevSlide + '"]').css({left:'-100%'});

<div class="wrapper">
<div class="slide_container"><div class="slide">4</div><div class="slide">5</div><div  class="slide">6</div><div class="slide">1</div><div class="slide">2</div><div class="slide">3</div></div></div>
<button id="left">Left</button>
<button id="right">Right</button>

.wrapper{height:60px;width:200px;border:gray solid 10px;background:#ccc;overflow:hidden}
.slide_container{margin-left:-600px;height:60px;width:4000px}
.slide{background:#aaa;height:60px;width:200px;display:inline-block;}

var slider = function(dir){
if(dir==1){
    $('.slide_container .slide:first').animate({'width':0},200,function(){$(this).appendTo($('.slide_container')).removeAttr('style');});

}else if(dir==-1){
    $('.slide_container .slide:last').css('width',0).prependTo($('.slide_container ')).animate({'width':200},200,function(){$(this).removeAttr('style');});
}
}

$('#left').click(function(){slider(1)});
$('#right').click(function(){slider(-1)});

     $('.carousel-prev-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        var beggining = false;
        carousel.find('li').each(function (i) {
            if ($(this).position().left < 1 - w)
            {
                x = $(this).position().left;
            }         
            if ($(this).position().left == 0)
            {
                beggining = true;
            }
        });
        //alert(x);
        if (beggining) {
            carousel.animate({ scrollLeft: carousel.find('li:last').position().left }, 'fast');
            return false;
        }
        else if (x == 0) {
            carousel.animate({ scrollLeft: 0 }, 'fast');
        } else {
            carousel.animate({ scrollLeft: scroll + x }, 'fast');
        }
        return false;
    });