研究了下jquery幻灯片,带左右按钮,渐隐渐显,自动播放 这个效果 HTML代码如下

 


  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>无标题文档</title> 
  6. <style> 
  7. body{ margin:0; padding:0;}  
  8. img{ border:none;}  
  9. .XYMarquee{ width:800px; height:600px; overflow:hidden; margin:0px auto 0; position:relative;}  
  10. .XYMarquee .banner{ position:absolute; left:0; top:0; z-index:10; display:none;}  
  11. .prev{ padding:37px; position:absolute; z-index:20; left:5px; top:300px; font-size:45px; cursor:pointer;}  
  12. .next{ padding:37px; position:absolute; z-index:20; left:685px; top:300px; font-size:45px; cursor:pointer;}  
  13. </style> 
  14. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  15. </head> 
  16.  
  17. <body> 
  18.     <div class="XYMarquee"> 
  19.             <a href="#" target="_blank" title="1"><img  src="images/1.jpg" width="800" height="600" class="banner"/></a> 
  20.             <a href="#" target="_blank" title="2"><img  src="images/2.JPG" width="800" height="600" class="banner"/></a> 
  21.             <a href="#" target="_blank" title="3"><img  src="images/4.jpg" width="800" height="600" class="banner"/></a> 
  22.         <div class="prev">&lt;</div> 
  23.         <div class="next">&gt;</div> 
  24.     </div> 
  25. <script src="index.js"></script> 
  26. <script> 
  27. $(document).ready(function () {  
  28.     $(".banner:first").show();  
  29. });  
  30. </script> 
  31.  
  32. </body> 
  33. </html> 

在这个HTML代码中要注意几个问题

第一 滚动的图片外层要设置成相对定位或者绝对定位!否则滚动不了!

第二 所有的图片在样式里面 我用了display:none 一定要用这个 否则的话 会有问题 滚动的时候 第一张播放完后 第二张就迅速的播放 这样就会有问题!

JS代码:

 


  1. // JavaScript Document  
  2.     function setTab(IClass,WClass,time,prev,next){  
  3.         self.o = 0;//初始化位置  
  4.         self.Banner = $(IClass);  
  5.         self.bannerFirst = $(IClass+":first");  
  6.         self.XYMarquee = $(WClass);  
  7.         self.Prev = $(prev);  
  8.         self.Next = $(next);  
  9.         self.time = time;  
  10.     }  
  11.     setTab.prototype ={  
  12.         init : function(){  
  13.             var self = this;  
  14.             self.auto();  
  15.             self.Prev();  
  16.             self.Next();  
  17.             self.hover();     
  18.         },  
  19.         auto : function(){  
  20.             self.mytime = setInterval(function(){  
  21.                 pub();    
  22.             },self.time)      
  23.         },  
  24.         hover : function(){  
  25.             self.XYMarquee.hover(function(){  
  26.                 if(self.mytime){ clearInterval(self.mytime);}     
  27.             },function(){  
  28.                 self.mytime = setInterval(function(){  
  29.                     pub();    
  30.                 },self.time);     
  31.             });   
  32.         },  
  33.         Prev : function(){  
  34.             self.Prev.click(function(){  
  35.                 self.o--;  
  36.                 if(self.o==-4){self.o=-1;}    
  37.                 var len = self.Banner.length;  
  38.                 self.Banner.fadeOut();  
  39.                 self.Banner.eq(self.o).fadeIn();  
  40.             });   
  41.         },    
  42.         Next : function(){  
  43.             self.Next.click(function(){  
  44.                 pub();    
  45.             });   
  46.         }  
  47.     }  
  48.     function pub(){  
  49.         self.o++;  
  50.         var len = self.Banner.length;  
  51.         self.Banner.fadeOut();  
  52.         self.Banner.eq(self.o).fadeIn();  
  53.         if(self.o==len){  
  54.             self.o = 0;  
  55.             self.bannerFirst.fadeIn(); //解决播放后,回到第一张时会不显示图片的BUG   
  56.         }     
  57.     }  
  58.     var newSetTab=new setTab(".banner",".XYMarquee","3000",".prev",".next");  
  59.     newSetTab.init(); 

当然JS用了javascript面向对象编程来封装的js  js代码并不难 关键就是结构写好的话 样式写好的话 js不怎么难  下面有附件 可以下载看看 OK!就这样吧 可以多看看代码就能理解了 现在俺正听着“筷子兄弟-好男孩”这首歌  也没有什么话说 思维就乱了!呵呵!!这首歌个人觉得蛮好听的 有空大家可以试试听 嘿嘿!!!觉得这首歌正写的是我呢 !!哈哈