首页>>Jquery图片>>用按钮控制图片左右滚动(2013-10-04)

用按钮控制图片左右滚动

 用按钮控制图片左右滚动,默认不会滚动的

用按钮控制图片左右滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="layout">  
  2.     <div class="hotPic">  
  3.         <div class="JQ-slide">  
  4.             <div class="JQ-slide-nav"><a class="prev" href="javascript:void(0);">‹</a><a class="next" href="javascript:void(0);">›</a></div>  
  5.             <div class="wrap">  
  6.                 <ul class="JQ-slide-content imgList">  
  7.                     <li>  
  8.                         <a href="#" class="img"><img src="../erlianhaote.png" width="140" height="100" /></a>  
  9.                         <a href="#" class="txt">二连浩特</a>  
  10.                     </li>  
  11.                     <li>  
  12.                         <a href="#" class="img"><img src="../dalian.jpg" width="140" height="100" /></a>  
  13.                         <a href="#" class="txt">大连</a>  
  14.                     </li>  
  15.                     <li>  
  16.                         <a href="#" class="img"><img src="../sanya.jpg" width="140" height="100"  /></a>  
  17.                         <a href="#" class="txt">三亚</a>  
  18.                     </li>  
  19.                     <li>  
  20.                         <a href="#" class="img"><img src="../dandong.png" width="140" height="100"  /></a>  
  21.                         <a href="#" class="txt">丹东</a>  
  22.                     </li>  
  23.                     <li>  
  24.                         <a href="#" class="img"><img src="../zhoushan.jpg" width="140" height="100" /></a>  
  25.                         <a href="#" class="txt">中山</a>  
  26.                     </li>  
  27.                     <li>  
  28.                         <a href="http://www.freejs.net" class="img"><img src="../freejs.jpg" width="140" height="100"  /></a>  
  29.                         <a href="#" class="txt">freejs</a>  
  30.                     </li>  
  31.                     <li>  
  32.                         <a href="#" class="img"><img src="../mohe.png" width="140" height="100"  /></a>  
  33.                         <a href="#" class="txt">漠河</a>  
  34.                     </li>  
  35.                 </ul>  
  36.             </div>  
  37.         </div>  
  38.     </div>    
  39. </div>    

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function (){  
  3.       
  4.     /* 用按钮控制图片左右滚动 */  
  5.     $(".hotPic .JQ-slide").Slide({  
  6.         effect:"scroolLoop",  
  7.         autoPlay:false,  
  8.         speed:"normal",  
  9.         timer:3000,  
  10.         steps:1  
  11.     });  
  12.       
  13. });  
  14. </script>  

除了jq库以外，还用了slide.js

 

JavaScript Code
  1. /** 
  2.  * @author ͷ 
  3.  */  
  4. (function($){  
  5.     $.fn.Slide=function(options){  
  6.         var opts = $.extend({},$.fn.Slide.deflunt,options);  
  7.         var index=1;  
  8.         var targetLi = $("." + opts.claNav + " li", $(this));//Ŀ  
  9.         var clickNext = $("." + opts.claNav + " .next", $(this));//һť  
  10.         var clickPrev = $("." + opts.claNav + " .prev", $(this));//һť  
  11.         var ContentBox = $("." + opts.claCon , $(this));//Ķ  
  12.         var ContentBoxNum=ContentBox.children().size();//Ԫظ  
  13.         var slideH=ContentBox.children().first().height();//Ԫظ߶ȣ൱ڹĸ߶  
  14.         var slideW=ContentBox.children().first().width();//Ԫؿȣ൱ڹĿ  
  15.         var autoPlay;  
  16.         var slideWH;  
  17.         if(opts.effect=="scroolY"||opts.effect=="scroolTxt"){  
  18.             slideWH=slideH;  
  19.         }else if(opts.effect=="scroolX"||opts.effect=="scroolLoop"){  
  20.             ContentBox.css("width",ContentBoxNum*slideW);  
  21.             slideWH=slideW;  
  22.         }else if(opts.effect=="fade"){  
  23.             ContentBox.children().first().css("z-index","1");  
  24.         }  
  25.           
  26.         return this.each(function() {  
  27.             var $this=$(this);  
  28.             //  
  29.             var doPlay=function(){  
  30.                 $.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);  
  31.                 index++;  
  32.                 if (index*opts.steps >= ContentBoxNum) {  
  33.                     index = 0;  
  34.                 }  
  35.             };  
  36.             clickNext.click(function(event){  
  37.                 $.fn.Slide.effectLoop.scroolLeft(ContentBox, targetLi, index, slideWH, opts,function(){  
  38.                     for(var i=0;i<opts.steps;i++){  
  39.                         ContentBox.find("li:first",$this).appendTo(ContentBox);  
  40.                     }  
  41.                     ContentBox.css({"left":"0"});  
  42.                 });  
  43.                 event.preventDefault();  
  44.             });  
  45.             clickPrev.click(function(event){  
  46.                 for(var i=0;i<opts.steps;i++){  
  47.                     ContentBox.find("li:last").prependTo(ContentBox);  
  48.                 }  
  49.                 ContentBox.css({"left":-index*opts.steps*slideW});  
  50.                 $.fn.Slide.effectLoop.scroolRight(ContentBox, targetLi, index, slideWH, opts);  
  51.                 event.preventDefault();  
  52.             });  
  53.             //Զ  
  54.             if (opts.autoPlay) {  
  55.                 autoPlay = setInterval(doPlay, opts.timer);  
  56.                 ContentBox.hover(function(){  
  57.                     if(autoPlay){  
  58.                         clearInterval(autoPlay);  
  59.                     }  
  60.                 },function(){  
  61.                     if(autoPlay){  
  62.                         clearInterval(autoPlay);  
  63.                     }  
  64.                     autoPlay=setInterval(doPlay, opts.timer);  
  65.                 });  
  66.             }  
  67.               
  68.             //Ŀ¼  
  69.             targetLi.hover(function(){  
  70.                 if(autoPlay){  
  71.                     clearInterval(autoPlay);  
  72.                 }  
  73.                 index=targetLi.index(this);  
  74.                 window.setTimeout(function(){$.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);},200);  
  75.                   
  76.             },function(){  
  77.                 if(autoPlay){  
  78.                     clearInterval(autoPlay);  
  79.                 }  
  80.                 autoPlay = setInterval(doPlay, opts.timer);  
  81.             });  
  82.         });  
  83.     };  
  84.     $.fn.Slide.deflunt={  
  85.         effect : "scroolY",  
  86.         autoPlay:true,  
  87.         speed : "normal",  
  88.         timer : 1000,  
  89.         defIndex : 0,  
  90.         claNav:"JQ-slide-nav",  
  91.         claCon:"JQ-slide-content",  
  92.         steps:1  
  93.     };  
  94.     $.fn.Slide.effectLoop={  
  95.         scroolLeft:function(contentObj,navObj,i,slideW,opts,callback){  
  96.             contentObj.animate({"left":-i*opts.steps*slideW},opts.speed,callback);  
  97.             if (navObj) {  
  98.                 navObj.eq(i).addClass("on").siblings().removeClass("on");  
  99.             }  
  100.         },  
  101.           
  102.         scroolRight:function(contentObj,navObj,i,slideW,opts,callback){  
  103.             contentObj.stop().animate({"left":0},opts.speed,callback);  
  104.               
  105.         }  
  106.     }  
  107.     $.fn.Slide.effect={  
  108.         fade:function(contentObj,navObj,i,slideW,opts){  
  109.             contentObj.children().eq(i).stop().animate({opacity:1},opts.speed).css({"z-index": "1"}).siblings().animate({opacity: 0},opts.speed).css({"z-index":"0"});  
  110.             navObj.eq(i).addClass("on").siblings().removeClass("on");  
  111.         },  
  112.         scroolTxt:function(contentObj,undefined,i,slideH,opts){  
  113.             //alert(i*opts.steps*slideH);  
  114.             contentObj.animate({"margin-top":-opts.steps*slideH},opts.speed,function(){  
  115.                 for( var j=0;j<opts.steps;j++){  
  116.                     contentObj.find("li:first").appendTo(contentObj);  
  117.                 }  
  118.                 contentObj.css({"margin-top":"0"});  
  119.             });  
  120.         },  
  121.         scroolX:function(contentObj,navObj,i,slideW,opts,callback){  
  122.             contentObj.stop().animate({"left":-i*opts.steps*slideW},opts.speed,callback);  
  123.             if (navObj) {  
  124.                 navObj.eq(i).addClass("on").siblings().removeClass("on");  
  125.             }  
  126.         },  
  127.         scroolY:function(contentObj,navObj,i,slideH,opts){  
  128.             contentObj.stop().animate({"top":-i*opts.steps*slideH},opts.speed);  
  129.             if (navObj) {  
  130.                 navObj.eq(i).addClass("on").siblings().removeClass("on");  
  131.             }  
  132.         }  
  133.     };  
  134. })(jQuery);  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_62.html