您的位置：首页 > Web前端 > JQuery

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

2014-01-23 20:41 543 查看 
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>


 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航