jquery幻灯片，带左右按钮，渐隐渐显，自动播放组件-原创手记-慕课网

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ margin:0; padding:0;}  img{ border:none;}  .XYMarquee{ width:800px; height:600px; overflow:hidden; margin:0px auto 0; position:relative;}  .XYMarquee .banner{ position:absolute; left:0; top:0; z-index:10; display:none;}  .prev{ padding:37px; position:absolute; z-index:20; left:5px; top:300px; font-size:45px; cursor:pointer;}  .next{ padding:37px; position:absolute; z-index:20; left:685px; top:300px; font-size:45px; cursor:pointer;}  </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> </head>  <body>     <div class="XYMarquee">             <a href="#" target="_blank" title="1"><img  src="images/1.jpg" width="800" height="600" class="banner"/></a>             <a href="#" target="_blank" title="2"><img  src="images/2.JPG" width="800" height="600" class="banner"/></a>             <a href="#" target="_blank" title="3"><img  src="images/4.jpg" width="800" height="600" class="banner"/></a>         <div class="prev">&lt;</div>         <div class="next">&gt;</div>     </div> <script src="index.js"></script> <script> $(document).ready(function () {      $(".banner:first").show();  });  </script>  </body> </html>

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

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

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

JS代码：

// JavaScript Document      function setTab(IClass,WClass,time,prev,next){          self.o = 0;//初始化位置          self.Banner = $(IClass);          self.bannerFirst = $(IClass+":first");          self.XYMarquee = $(WClass);          self.Prev = $(prev);          self.Next = $(next);          self.time = time;      }      setTab.prototype ={          init : function(){              var self = this;              self.auto();              self.Prev();              self.Next();              self.hover();             },          auto : function(){              self.mytime = setInterval(function(){                  pub();                },self.time)              },          hover : function(){              self.XYMarquee.hover(function(){                  if(self.mytime){ clearInterval(self.mytime);}                 },function(){                  self.mytime = setInterval(function(){                      pub();                    },self.time);                 });           },          Prev : function(){              self.Prev.click(function(){                  self.o--;                  if(self.o==-4){self.o=-1;}                    var len = self.Banner.length;                  self.Banner.fadeOut();                  self.Banner.eq(self.o).fadeIn();              });           },            Next : function(){              self.Next.click(function(){                  pub();                });           }      }      function pub(){          self.o++;          var len = self.Banner.length;          self.Banner.fadeOut();          self.Banner.eq(self.o).fadeIn();          if(self.o==len){              self.o = 0;              self.bannerFirst.fadeIn(); //解决播放后，回到第一张时会不显示图片的BUG           }         }      var newSetTab=new setTab(".banner",".XYMarquee","3000",".prev",".next");      newSetTab.init();

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