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>