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

 

 
   
     
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
    
  2.  <html xmlns="http://www.w3.org/1999/xhtml">  
    3.  
    
  3.  <head>  
    4.  
    
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.  
    
  5.  <title>无标题文档</title>  
    6.  
    
  6.  <style>  
    7.  
    
  7. body{ margin:0; padding:0;}  
    8.  
    
  8. img{ border:none;}  
    9.  
    
  9. .XYMarquee{ width:800px; height:600px; overflow:hidden; margin:0px auto 0; position:relative;}  
    10.  
    
  10. .XYMarquee .banner{ position:absolute; left:0; top:0; z-index:10; display:none;}  
    11.  
    
  11. .prev{ padding:37px; position:absolute; z-index:20; left:5px; top:300px; font-size:45px; cursor:pointer;}  
    12.  
    
  12. .next{ padding:37px; position:absolute; z-index:20; left:685px; top:300px; font-size:45px; cursor:pointer;}  
    13.  
    
  13.  </style>  
    14.  
    
  14.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
    15.  
    
  15.  </head>  
    16.  
    
  16.  
    17.  
    
  17.  <body>  
    18.  
    
  18.      <div class="XYMarquee">  
    19.  
    
  19.              <a href="#" target="_blank" title="1"><img  src="images/1.jpg" width="800" height="600" class="banner"/></a>  
    20.  
    
  20.              <a href="#" target="_blank" title="2"><img  src="images/2.JPG" width="800" height="600" class="banner"/></a>  
    21.  
    
  21.              <a href="#" target="_blank" title="3"><img  src="images/4.jpg" width="800" height="600" class="banner"/></a>  
    22.  
    
  22.          <div class="prev">&lt;</div>  
    23.  
    
  23.          <div class="next">&gt;</div>  
    24.  
    
  24.      </div>  
    25.  
    
  25.  <script src="index.js"></script>  
    26.  
    
  26.  <script>  
    27.  
    
  27. $(document).ready(function () {  
    28.  
    
  28.     $(".banner:first").show();  
    29.  
    
  29. });  
    30.  
    
  30.  </script>  
    31.  
    
  31.  
    32.  
    
  32.  </body>  
    33.  
    
  33.  </html>  
    34.  
   
 
   
在这个HTML代码中要注意几个问题
 
   
第一 滚动的图片外层要设置成相对定位或者绝对定位！否则滚动不了！
 
   
第二 所有的图片在样式里面 我用了display：none 一定要用这个 否则的话 会有问题 滚动的时候 第一张播放完后 第二张就迅速的播放 这样就会有问题！
 
   
JS代码：
 
   
 
 
   
 
   
     
    
  1. // JavaScript Document  
    2.  
    
  2.      function setTab(IClass,WClass,time,prev,next){   
    3.  
    
  3.          self.o = 0;//初始化位置   
    4.  
    
  4.         self.Banner = $(IClass);  
    5.  
    
  5.          self.bannerFirst = $(IClass+":first");   
    6.  
    
  6.         self.XYMarquee = $(WClass);  
    7.  
    
  7.         self.Prev = $(prev);  
    8.  
    
  8.         self.Next = $(next);  
    9.  
    
  9.         self.time = time;  
    10.  
    
  10.     }  
    11.  
    
  11.     setTab.prototype ={  
    12.  
    
  12.          init : function(){   
    13.  
    
  13.              var self = this;   
    14.  
    
  14.             self.auto();  
    15.  
    
  15.             self.Prev();  
    16.  
    
  16.             self.Next();  
    17.  
    
  17.             self.hover();     
    18.  
    
  18.         },  
    19.  
    
  19.          auto : function(){   
    20.  
    
  20.              self.mytime = setInterval(function(){   
    21.  
    
  21.                 pub();    
    22.  
    
  22.             },self.time)      
    23.  
    
  23.         },  
    24.  
    
  24.          hover : function(){   
    25.  
    
  25.              self.XYMarquee.hover(function(){   
    26.  
    
  26.                  if(self.mytime){ clearInterval(self.mytime);}      
    27.  
    
  27.              },function(){   
    28.  
    
  28.                  self.mytime = setInterval(function(){   
    29.  
    
  29.                     pub();    
    30.  
    
  30.                 },self.time);     
    31.  
    
  31.             });   
    32.  
    
  32.         },  
    33.  
    
  33.          Prev : function(){   
    34.  
    
  34.              self.Prev.click(function(){   
    35.  
    
  35.                 self.o--;  
    36.  
    
  36.                  if(self.o==-4){self.o=-1;}     
    37.  
    
  37.                  var len = self.Banner.length;   
    38.  
    
  38.                 self.Banner.fadeOut();  
    39.  
    
  39.                 self.Banner.eq(self.o).fadeIn();  
    40.  
    
  40.             });   
    41.  
    
  41.         },    
    42.  
    
  42.          Next : function(){   
    43.  
    
  43.              self.Next.click(function(){   
    44.  
    
  44.                 pub();    
    45.  
    
  45.             });   
    46.  
    
  46.         }  
    47.  
    
  47.     }  
    48.  
    
  48.      function pub(){   
    49.  
    
  49.         self.o++;  
    50.  
    
  50.          var len = self.Banner.length;   
    51.  
    
  51.         self.Banner.fadeOut();  
    52.  
    
  52.         self.Banner.eq(self.o).fadeIn();  
    53.  
    
  53.          if(self.o==len){   
    54.  
    
  54.             self.o = 0;  
    55.  
    
  55.              self.bannerFirst.fadeIn(); //解决播放后，回到第一张时会不显示图片的BUG    
    56.  
    
  56.         }     
    57.  
    
  57.     }  
    58.  
    
  58.      var newSetTab=new setTab(".banner",".XYMarquee","3000",".prev",".next");   
    59.  
    
  59.     newSetTab.init(); 
    60.  
   
 
   
当然JS用了javascript面向对象编程来封装的js  js代码并不难 关键就是结构写好的话 样式写好的话 js不怎么难  下面有附件 可以下载看看 OK！就这样吧 可以多看看代码就能理解了 现在俺正听着“筷子兄弟-好男孩”这首歌  也没有什么话说 思维就乱了！呵呵！！这首歌个人觉得蛮好听的 有空大家可以试试听 嘿嘿！！！觉得这首歌正写的是我呢 ！！哈哈