jquery缩略图滑块循环

Question

我创建了一个缩略图轮播，但无法弄清楚如何在它到达最后一个缩略图后停止。在缩略图的末尾，用户应该只能单击#left .arrow 以返回缩略图。

提前感谢您的帮助！！

这里是 HTML

            <img id="bigimage" src="images/CHENCH1.jpg" alt="City1" title="City1">

            <div id="thumbnail-wrapper">
                <a id="left" class="arrow"><img src="images/leftb.png"></a>
                        <div id="thumbnails">

                            <img class="thumb" id="image1" src="images/CHENCH1.jpg" alt="City1" title="City1">

                            <img class="thumb" id="image2" src="images/CHENCH2.jpg" alt="City2" title="City2">

                            <img class="thumb" id="image3" src="images/CHENCH3.jpg" alt="City3" title="City3">

                            <img class="thumb" id="image4" src="images/CHENCH4.jpg" alt="City4" title="City4">

                            <img class="thumb" id="image5" src="images/CHENCH5.jpg" alt="City5" title="City5">

                            <img class="thumb" id="image6" src="images/CHENCH6.jpg" alt="City6" title="City6">

                            <img class="thumb" id="image7" src="images/CHENCH7.jpg" alt="City7" title="City7">

                            <img class="thumb" id="image8" src="images/CHENCH1.jpg" alt="City8" title="City8">
                        </div>
            <a id="right" class="arrow"><img src="images/rightb.png"></a>
            </div>



        </div><!--product-->

这里是 JS

$(document).ready(function(){
    $(".thumb").click(function(){
        $("#bigimage").attr("src", $(this).attr("src"));
        $("#bigimage").attr("title", $(this).attr("title"));
        $("#bigimage").attr("alt", $(this).attr("alt"));
    });
//move the last item before first item, just in case user click prev button

    $("#right").click(function(){

        $("#thumbnails").animate({
            "left": "-=178px"

        },500);

    });


$("#left").click(function(){

    $("#thumbnails").animate({
        "left": "+=178px"

    },500);

});

});

这里是 CSS：

#product{
    float: left;
    width: 560px;
}
#rightinfo{
padding-top: 20px;
    float: left;
    width: 200px;
}
#rightinfo h1{
    font-size: 1.5em;
}
.thumb {
    float: left;
    width: 150px;
    display: block;
    margin-right: 28px;
    cursor: pointer;

}

.clear {
    clear: both;
}

#thumbnail-wrapper {
    width: 546px;
    height: 100px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    left: 7px;
}

#thumbnails {
    width: 1066px;
    position: absolute;
    left: 20px;
    /*overflow: hidden;*/
}

#bigimage {
     padding: 20px;
    width: 560px;
    display: block;
}

.arrow {
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

.arrow:hover {
    opacity: .8;
}

#left {
    left: 0;
}

#right {
    left: 525px;
}

这是该网站的链接：http://emmastoodio.com/GNEUDECK/day-bed.html

Answer 1

如果当前正在发生动画，则需要防止他们的点击导致滑动动作，并使用滑动元素的宽度来确定何时滑动有效。

$("#right").click(function(){
    var thumbnails = $("#thumbnails");

    if (thumbnails.is(":animated")) {
        return;
    }

    if ( thumbnails.outerWidth(true) + thumbnails.position().left - 178 > $("#thumbnail-wrapper").innerWidth()) {
        thumbnails.animate({
            "left": "-=178px"           
        },500);
    }
});


$("#left").click(function(){
    var thumbnails = $("#thumbnails");

    if (thumbnails.is(":animated")) {
        return;
    }

    if (thumbnails.position().left < 0) {       
        thumbnails.animate({
            "left": "+=178px"
        },500);
    }
});

Answer 2

更新你的脚本：

 $(document).ready(function(){
$("#left").hide();
$(".thumb").click(function(){
    $("#bigimage").attr("src", $(this).attr("src"));
    $("#bigimage").attr("title", $(this).attr("title"));
    $("#bigimage").attr("alt", $(this).attr("alt"));
});
 //move the last item before first item, just in case user click prev button

$("#right").click(function(){
     var maxToLeft=0-$("#thumbnails").width()+$("#thumbnails").parent().width();
     var currentLeft=$("#thumbnails").css('left');
     currentLeft=currentLeft.substring(0,currentLeft.length-2);
     if((parseInt(currentLeft)-185)<=maxToLeft)
     {
     $(this).hide();

      $("#thumbnails").animate({

                 "left": (maxToLeft+178)+"px"

    },500);
     return;
     }
     $("#left").show();
    $("#thumbnails").animate({

        "left": "-=178px"

    },500);

});


 $("#left").click(function(){
var currentLeft=$("#thumbnails").css('left');
 currentLeft=currentLeft.substring(0,currentLeft.length-2);
         if((parseInt(currentLeft)+185)>=20)
         {
         $(this).hide();
         $("#thumbnails").animate({
                 "left": "20px"

},500);
         return;
         }
         $("#right").show();

$("#thumbnails").animate({
    "left": "+=178px"

},500);

 });
 });