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

来源：互联网发布：数据可视化怎么学编辑：程序博客网时间：2024/05/01 18:45
 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>
0 0