Question

我正在使用jQuery基于click事件创建一个非常简单的幻灯片。当用户单击下一个按钮时，滑块将向左边距： - = 400px。滑块工作得很好，但是当它到达最后一个滑块并且用户再次单击按钮时它不会显示任何内容，它只会 - = 400px。我想要发生的是，当用户点击他在最后一个img上时，显示第一个图像然后显示第二个，依此类推。当有人点击按钮时，我想有无限循环。希望有人可以帮助解决这个问题。

感谢。

HTML code：

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

   });
});

Answer 1

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

您要做的是检查元素是否是最后一个元素。计数器从1开始，所以在N + 1个元素之后我们重复滑块。

jQuery滑块onclick事件循环照片

1 个答案: