我创建了一个缩略图轮播,一旦到达最后一个缩略图,就无法弄清楚如何让它停止。在缩略图的末尾,用户应该只能点击#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);
});
});
HEre是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;
}
答案 0 :(得分: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);
}
});
答案 1 :(得分:0)
更新您的脚本:
$(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);
});
});