jquery控制左右箭头滚动图片列表的实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 6  <title>jq控制左右箭头滚动图片列表</title>
 7  <style type="text/css">
 8     *{ margin:0; padding:0;font-size: 12px;}
 9     ul{ list-style:none;}
10      .slider{ width:760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;}
11      #slider_pic{ width: 630px;margin:0 auto;overflow: hidden;height: 130px;position: relative;}
12      .prev,.next{position: absolute;width: 20px;height: 20px;cursor: pointer;top:60px;background-color: #daa520; text-align: center;line-height: 20px;font-weight: bold;color: #fff;}
13      .next{right: 20px;}
14      .no_click{background-color: #808080;}
15      #slider_pic li{float: left;margin-right: 10px;}
16      #slider_pic ul{position: absolute;left: 0;}
17 
18  </style>
19      <script type="text/javascript">
20          $(function(){
21              var oPic=$('#slider_pic').find('ul');
22              var oImg=oPic.find('li');
23              var oLen=oImg.length;
24              var oLi=oImg.width();
25              var prev=$("#prev");
26              var next=$("#next");
27 
28            oPic.width(oLen*210);//计算总长度
29              var iNow=0;
30              var iTimer=null;
31              prev.click(function(){
32                   if(iNow>0){ 
33                    iNow--;
34 
35                   }
36                  ClickScroll();
37              })
38              next.click(function(){
39                  if(iNow<oLen-3){
40                      iNow++
41                  }
42                  ClickScroll();
43              })
44 
45              function ClickScroll(){
46 
47                  iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');
48                  iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");
49 
50                  oPic.animate({left:-iNow*210})
51              }
52 
53          })
54 
55  
56      </script>
57  </head>
58 
59  <body>
60      <div class="slider">
61          <span class="prev no_click" id="prev"><<</span>
62          <span class="next " id="next">>></span>
63        <div id="slider_pic">
64          <ul>
65             <li><img src="http://php.360cang.com/images/201309/goods_img/3713_G_1378435488331.jpg" width="200" height="130" /></li>
66             <li><img src="http://php.360cang.com/images/201309/goods_img/2336_G_1378435542308.jpg" width="200" height="130" /></li>
67             <li><img src="http://php.360cang.com/images/201309/goods_img/3374_G_1378435589643.jpg" width="200" height="130" /></li>
68             <li><img src="http://php.360cang.com/images/201309/goods_img/3377_G_1378435463855.jpg" width="200" height="130" /></li>
69             <li><img src="http://php.360cang.com/images/201309/goods_img/305_G_1378852898834.jpg" width="200" height="130" /></li>
70 
71            
72           </ul>
73        </div>
74 
75     </div>
76  </body>
77  </html>