我正在开发一个带有无限循环的图像缩略图滚动。我让滚动部分工作但不是循环。
这是我所做的http://jsfiddle.net/tVbkM/1/
的现场演示HTML:
<div id="a_top">Top</div>
<div id="s_area">
<div id="s_container">
<div id="s_cont">
<img class="img_none" src="http://tinyurl.com/buev4y2" width="175" height="175" />
<img class="img_none" src="http://tinyurl.com/buev4y2" width="175" height="175" />
<img class="img_none" src="http://tinyurl.com/buev4y2" width="175" height="175" />
//// 18 images in total.
</div>
</div>
</div>
<div id="a_down">Down</div>
CSS:
img {width:175px; height:175px; background-color:#ccc; text-align:center; vertical-align:middle;}
#a_top { width:73px; height:22px; margin:0px auto; cursor:pointer; background-color:#ccc; text-align:center; magin:10px; }
#s_cont { height:auto; width:auto; margin:0px; padding:0px;}
#s_area { width:185px; margin:0px auto; height:555px; overflow:hidden;}
#a_down { width:73px; height:22px; margin:0px auto; cursor:pointer; background-color:#ccc; text-align:center; magin:10px;}
.img_none { border:#000 solid 1px; margin:4px; cursor:pointer;}
.img_select { border:#642d8a solid 4px; margin:1px;}
#s_container { height:auto; width:100%;}
脚本:
$("#s_area img").click(function() {
$("#s_area img.img_select").removeClass("img_select");
$("#s_area img").addClass("img_none");
$(this).removeClass("img_none");
$(this).addClass("img_select");
var bagName = $(this).attr("link");
$("#nxt_stp a").attr("href", bagName + ".html");
return false;
});
var h = $("#s_container").height();
function setIt() {
///alert($("#s_container").offset().top);
///alert($("#s_container img").outerHeight());
var offset = Math.abs((($("#s_container").offset().top) - 22) / 185);
var roundoff = (Math.round(offset)) * 185;
$("#s_area").stop().animate({
scrollTop: roundoff
}, 800);
}
$("#a_top").mousedown(function() {
$("#s_area").stop().animate({
scrollTop: 0
}, 5000, function() {
$("#s_cont img:last").before("#s_cont img:first");
});
}).mouseup(function() {
setIt();
});
$("#a_down").mousedown(function() {
$("#s_area").stop().animate({
scrollTop: h
}, 5000, function() {
$("#s_cont img:first").after("#s_cont img:last");
});
}).mouseup(function() {
setIt();
});