jQuery滑块onclick事件循环照片

我正在使用jQuery创建一个基于onclick事件的非常简单的幻灯片事件。当用户点击下一个按钮时，滑块将保留余量： - = 400px。该滑块工作得很好，但是当它到达最后一个滑块并且用户再次单击该按钮时它不会显示任何东西，它将会变成 - = 400px。我想要发生的是，当用户点击最后一张图片时点击，显示第一张图片，然后第二张图片，等等。当有人点击按钮时，我想有无尽的循环。希望有人可以帮助解决这个问题。jQuery滑块onclick事件循环照片

谢谢。

HTML代码：

<div class="slideClick"> 
     <ul class="sliderClick"> 
      <li class="slidesClick"><img src ="imgs/model_01.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_02.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_03.jpeg"></li> 
      <li class="slidesClick"><img src ="imgs/model_04.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_01.jpg"></li> 
     </ul> 
</div> 
    <button class="clickPrev">Prev</button> 
    <button class="clickNext">Next</button>

CSS代码：

.slideClick { 
    clear: both; 
    width:400px; 
    height:400px; 
    border: 1px solid black; 
    overflow: hidden; 
    margin-top: 100px; 
} 

.slideClick .sliderClick{ 
    width:2000px; 
    height:400px; 
} 

.slideClick .sliderClick .slidesClick { 
    list-style: none; 
} 

.slideClick .sliderClick .slidesClick img{ 
    width:400px; 
    height:400px; 
    float:left; 
}

jQuery代码：

var currentClickSlider = 1; 

$(".clickNext").on("click", function(){ 
    $(".sliderClick").animate({marginLeft: "-=400px"}, 500, function(){ 

     currentClickSlider++; 
     if (currentClickSlider === $(".slidesClick").length){ 

      currentClickSlider = 1; 
      $(".sliderCLick").css("margin-left", 0); 
     } 

    }); 
});

来源

2016-04-17 NoName84

if (currentClickSlider === $(".slidesClick").length + 1) {

你想要做的是检查，如果该元素是最后一个元件。计数器从1开始，因此在N + 1个元素之后，我们重复滑块。

来源

2016-04-17 19:20:25 Warrior

谢谢你的回答。然而，我的错误是我没有在最后包含.length。我已经使用过你的代码，但它仍然无法正常工作。 – NoName84

在动画回调函数中有几个错误类型，例如$（“。sliderCLick”）。我建议将重新启动滑块的代码放在回调之外，因为您想在执行任何动画之前重置其状态。首先你要检查你试图显示哪个元素，然后根据这个元素进行动画处理。 – Warrior

如果你不忙，你能告诉我你会怎么写代码？为了这个工作？ – NoName84

jQuery滑块onclick事件循环照片

回答

相关问题