`Demo`

Question

...但是还没弄清楚如何让幻灯片循环 - 也就是说，当最后一张幻灯片完成时，它会从第一张幻灯片继续播放，而第一张幻灯片则会向后播放。

有没有人知道如何做到这一点？

/* THUMBNAIL SLIDER IMAGES 
------------------------------------------- */

.slideshow {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.images {
    position: absolute;
    left: 0; /* Change this value to slide */
    top: 0;
    height: 100%;
    width: 300%;
    z-index: -1; /* send this layer behind the .circle layer */
}


/* THUMBNAIL SLIDER NAVIGATION 
------------------------------------------- */

.thumb-slide-nav-wrapper {
    margin: 70px 15px; /* position of the nav buttons */
    overflow:auto;
}

.circle-left {
    /* position of the nav buttons */
    float:left;
}

.circle-right {
    /* position of the nav buttons */
    float:right;
}

.circle {
    /* nav buttons */
    z-index: 1;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background: green;
}

a .circle:hover {
    background: lightgrey;
}

感谢。

Answer 1

`Demo`

在您的JavaScript中只需检查是否已达到结束（first或last图片），然后再滑动它。

要获取图片总数，请使用：var tot=$(".images").find("img").length;

并使用计数器变量i来检查滑动和direction条件的end image reached or not。

所以这是你改变的JS / JQuery：

$(document).ready(function() {
var tot=$(".images").find("img").length; //total images in slider nav
    var i=0; //acts as a counter
    var thumbSliderPos = $(".images").css("left");

    // Detect thumbnail nav button clicks

    $('#circle-left').click(function() {
        //Detect if first image is reached?
        if(i<=0){
        i=tot-2;
        $(".images").animate({
            "left": "-="+(400*i),
        }, 400);
        //Yes Show last image
       }
        else
        {
        $(".images").animate({
            left: "+=400",
        }, 400);
        i--;
        }
    });

    $('#circle-right').click(function() {
        //Detect if last image is reached?
        if(i>=tot-2)
        {
        $(".images").animate({
            left: "0",
        }, 400);
        i=0;
         //Yes Show first image
        }
        else
        {
        $(".images").animate({
            left: "-=400",
        }, 400);
         i++;
       }
    });


});

<小时/> 在页面autoSlide之后设置loads这是另一个：

`Demo`

希望它能帮到你。干杯:)！

如何制作css jQuery缩略图幻灯片循环

1 个答案:

`Demo`

`Demo`