图片滚动效果实现说明
最近也是一直想不通图片滚动效果的实现思路，怎么实现图片的滚动的，今天在看到一个网站的滚动效果时，顺手点开了F12，看到最外层一个DIV的样式，过去的不明白一下子全了解了。
首先是图片的列表，我这边脚本如下：
1:
2: <ul class="ul_s">
3: <li class="li_s active"><a href="#"><img src="image/imgScroll/1.gif" class="img_s" /></a></li>
4: <li class="li_s" style="top:300px;"><a href="#"><img src="image/imgScroll/2.gif" class="img_s" /></a></li>
5: <li class="li_s" style="top:600px;"><a href="#"><img src="image/imgScroll/3.gif" class="img_s" /></a></li>
6: <li class="li_s" style="top:900px;"><a href="#"><img src="image/imgScroll/4.gif" class="img_s" /></a></li>
7: <li class="li_s" style="top:1200px;"><a href="#"><img src="image/imgScroll/5.gif" class="img_s" /></a></li>
8: <li class="li_s" style="top:1500px;"><a href="#"><img src="image/imgScroll/6.gif" class="img_s" /></a></li>
9: </ul>
对应CSS如下
1: .ul_s {
2: list-style: none;
3: width: auto;
4: margin: 0px;
5: padding: 0px;
6: position: absolute;
7: left:0px;
8: }
9: .li_s {
10: margin: 0px;
11: padding: 0px;
12: float: left;
13: list-style-type: none;
14: position:absolute;
15: }
16: .img_s {
17: border: none;
18: }
然后在外层包裹一个div，玄机就在div上，在设置了div的高度和宽度以后，还需要设置一个属性，如下：
1: .div_s {
2: height: 300px;
3: width: 1000px;
4: overflow:hidden;
5: position:relative;
6: }
这样，整个ul标记就只有div的部分能看到了，然后添加添加对应按钮的js事件
1: $(function(){
2: $("#btnPrev").click(function(){prev();});
3: $("#btnNext").click(function(){next();});
4: });
5:
6: function next()
7: {
8: var activeindex=$(".active").index();
9: activeindex=activeindex+1;
10: if(activeindex>$(".ul_s").children().length-1)
11: {
12: activeindex=0;
13: }
14: $(".active").removeClass("active");
15: $(".ul_s").children().eq(activeindex).addClass("active");
16: var leftpx=activeindex*300;
17: $(".ul_s").stop().animate({top:"-"+leftpx+"px"},1000);
18: }
19:
20: function prev()
21: {
22: var activeindex=$(".active").index();
23: activeindex=activeindex-1;
24: if(activeindex<0)
25: {
26: activeindex=$(".ul_s").children().length-1;
27: }
28: $(".active").removeClass("active");
29: $(".ul_s").children().eq(activeindex).addClass("active");
30: var leftpx=activeindex*300;
31: $(".ul_s").stop().animate({top:"-"+leftpx+"px"},1000);
32: }
在这里，向上时，只要找到前面的元素，向后时只要找到后面的元素，进行定位，就能实现图片的滚动效果了。
