1

我正在开发一个无限循环的图像缩略图滚动。我让滚动部分工作但不是循环。

这是我所做的现场演示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();
});
4

0 回答 0