Question

 $(document).ready(function(){
 //configerations
 var width = 720;
 var animationSpeed = 700;
 var currentSlide = 1;
 //DOM items
 var $slider = $('#slider');					//main sliding div
 var $slideContainer = $slider.find('.slides');	//ULs
 var $slides = $slideContainer.find('.slide');	// LIs
 
 
		$slider.click(function() {
			$slideContainer.animate({'margin-left': '-=720px'},animationSpeed, function() {
			currentSlide++;
			if (currentSlide == $slides.length) {
			currentSlide = 1;
			$slideContainer.css('margin-left', 0); }
			});
		});
 });

 #slider {width:720px; height:400px; overflow:hidden; float:left; border: 1px solid black;}
 #slider .slides {display: block; width:6000px; height:400px; margin:0; padding:0;}
 #slider .slide {float:left; list-style-type:none; width:720px; height:400px;}

 <div id="slider">
 <ul class="slides">
 <li class="slide">111</li>
 <li class="slide">222</li>
 <li class="slide">333</li>
 <li class="slide">444</li>
 <li class="slide">555</li>
 <li class="slide">666</li>
 </ul>
 </div>

在这个onClick Slider中，它可以正常工作到最后一张幻灯片，然后不点击就转到第一张幻灯片。

请参阅以下链接： Please see this Link to check the slider

Answer 1

正如我在评论中提到的那样，原来的问题是$slideContainer移动到第一个幻灯片，只要 last 幻灯片变为活动状态（即{只需将原始li条件从666更改为if即可解析包含currentSlide == $slides.length）的{1}}元素。

但是，正如您所注意到的那样，它仍会突然跳转到第一张幻灯片。要解决此问题，您可能需要重新考虑如何设置currentSlide > $slides.length动画。

最初，在滑动动画完成后，我们正在检查特定条件。但我的建议是在动画开始之前检查的条件。

我想说的是，如果你将JS更改为如下所示，它应该会产生你想要的结果。

<强> JavaScript的：

$slideContainer

或者，请查看 jsFiddle 。如果上面的代码中有任何不清楚的地方，请告诉我。希望这能产生你想要的结果。

Answer 2

以下方法完全符合我在上述问题中寻找的内容：

$(document).ready(function(){

    $("#slider ul").each(function(){
        // Set the interval to be 10 seconds
    //  var t = setInterval(function(){
        $("#rightArrow").click(function(){
            $("#slider ul").animate({marginLeft:-360},1000,function(){
                // This code runs after the animation completes
                $(this).find("li:last").after($(this).find("li:first"));
                // Now we've taken out the left-most list item, reset the margin
                $(this).css({marginLeft:0});
            })
        });
    });
});

在这个onClick Slider中，最后一张幻灯片转到第一张幻灯片，没有点击和动画

2 个答案: