Jquery封裝幻燈片效果

前幾天 在我同事博客里面看到一篇幻燈片 所以覺得用Jqeury寫幻燈片也并不是很難 就是和我在博客里面的tab自動切換的原理是一模一樣的 只是形式不同而已！所以今天也寫了一個常見的幻燈片效果 用Jquery寫的  很簡單 也是用我上次tab自動切換的js  所以原理沒有什么可說的 不懂的可以看看上次寫的TAB自動切換代碼：下面的一張截圖：

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了橫峰免費建站歡迎大家使用！

 

Jquery封裝幻燈片效果

就是類似這種幻燈片：

下面是HTML結(jié)構(gòu)和CSS樣式

 

  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=utf-8" /> 
  5. <title>無標(biāo)題文檔</title> 
  6. <style> 
  7. .Marquee{ width:490px; margin:50px auto 0; overflow:hidden;}  
  8. body,div,ul,li{ margin:0; padding:0;}  
  9. ul,li{ list-style:none;}  
  10. img{ display:block; border:none;}  
  11. .content-main{ width:490px; height:170px; overflow:hidden;}  
  12. .content{ width:490px; height:170px; overflow:hidden;}  
  13. .hide{ display:none;}  
  14. .menu{ width:490px; height:22px; overflow:hidden; background:#966;}  
  15. .menu li{ width:160px; height:22px; overflow:hidden; float:left; line-height:22px; text-align:center;}  
  16. .menu li.last-col{ width:170px; height:22px; overflow:hidden;}  
  17. .current{ background: #F00;}  
  18. .content a{ width:490px; height:170px; overflow:hidden; display:block;}  
  19. </style> 
  20. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>   
  21. <script src="autoTab.js"></script> 
  22. </head> 
  23.  
  24. <body> 
  25.     <div id="Marquee" class="Marquee">   
  26.         <div class="content-main"> 
  27.             <div class="content"><a href="#" target="_blank"><img  src="p_w_picpaths/1.jpg"/></a></div> 
  28.             <div class="content hide"><a href="#" target="_blank"><img  src="p_w_picpaths/2.jpg"/></a></div> 
  29.             <div class="content hide"><a href="#" target="_blank"><img  src="p_w_picpaths/3.jpg"/></a></div> 
  30.         </div> 
  31.         <ul class="menu"> 
  32.             <li class="current">tab1</li> 
  33.             <li>tab2</li> 
  34.             <li class="last-col">tab3</li> 
  35.         </ul> 
  36.     </div>   
  37.     <script type="text/javascript"> 
  38.         new tabMarquee("#Marquee",3);  
  39.     </script> 
  40. </body> 
  41. </html> 

JS代碼如下:

 

  1. // JavaScript Document 
  2.  
  3. function tabMarquee(obj,count){  
  4.     _this = this;  
  5.     _this.obj = obj;  
  6.     _this.count = count;  
  7.     _this.time = 3000;  //停留的時間 
  8.     _this.n = 0;  
  9.     var t;  
  10.     this.slider = function(){  
  11.         $(_this.obj + " .menu li").bind("mouseover",function(event){  
  12.             $(event.target).addClass("current").siblings().removeClass("current");  
  13.             var index = $(_this.obj + " .menu li").index(this);  
  14.             $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();  
  15.             _this.n = index;      
  16.         })  
  17.     }  
  18.       
  19.     this.addHover = function(){  
  20.         $(_this.obj).hover(function(){  
  21.             clearInterval(t);     
  22.         },function(){  
  23.             t = setInterval(_this.autoPlay,_this.time);   
  24.         })    
  25.     }  
  26.     this.autoPlay = function(){  
  27.         _this.n = _this.n >=(_this.count-1) ? 0 : ++_this.n;  
  28.         $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");      
  29.     }  
  30.     this.factory = function(){  
  31.         this.slider();  
  32.         this.addHover();  
  33.         t = setInterval(this.autoPlay,_this.time);    
  34.     }  
  35.     this.factory();  
  36. } 

下面?zhèn)鱾€附件 看不懂可以下載下來先看看效果 然后稍微理解下 就ok了！其實說真的js重要  但是HTML結(jié)構(gòu)和CSS樣式同樣重要 有時結(jié)構(gòu)寫好的話 css寫好的話 js就很簡單??！

附件：http://down.51cto.com/data/2359366

當(dāng)前名稱：Jquery封裝幻燈片效果
標(biāo)題來源：http://muchs.cn/article8/pdpdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、、品牌網(wǎng)站制作、網(wǎng)站排名、域名注冊、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管