用旋钮控制图片左右滚动

用按钮控制图片左右滚动

用按钮控制图片左右滚动

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

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