常常在各大网站上看到如下图所示的图片轮换效果，有的是用flash做的，有的是用js做的。

我就google一下，发现用js写的图片轮换效果例子是不少，可惜要么太繁琐，要么连页面都打不开

于是自己试了试，写了一个，代码很少。



js如下：

Javascript代码

  1. $(document).ready(function(){     
  2.      $(".clickButton a").attr("href","javascript:return false;");  
  3.      $(".clickButton a").each(function(index){             
  4.          $(this).click(function(){  
  5.              changeImage(this,index);      
  6.          });           
  7.      });   
  8.      autoChangeImage();        
  9. });  
  10.   
  11. function autoChangeImage(){  
  12.     for(var i = 0; i<=10000;i++){  
  13.          window.setTimeout("clickButton("+(i%5+1)+")",i*3000);             
  14.      }  
  15. }  
  16.   
  17. function clickButton(index){  
  18.      $(".clickButton a:nth-child("+index+")").click();  
  19. }  
  20.   
  21. function changeImage(element,index){  
  22.     var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  
  23.      $(".clickButton a").removeClass("active");  
  24.      $(element).addClass("active");  
  25.      $(".imgs img").attr("src",arryImgs[index]);  
  26. }  

$(document).ready(function(){ $(".clickButton a").attr("href","javascript:return false;"); $(".clickButton a").each(function(index){ $(this).click(function(){ changeImage(this,index); }); }); autoChangeImage(); }); function autoChangeImage(){ for(var i = 0; i<=10000;i++){ window.setTimeout("clickButton("+(i%5+1)+")",i*3000); } } function clickButton(index){ $(".clickButton a:nth-child("+index+")").click(); } function changeImage(element,index){ var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"]; $(".clickButton a").removeClass("active"); $(element).addClass("active"); $(".imgs img").attr("src",arryImgs[index]); }

鼠标停留版（参考malk的js改写的）：
Javascript代码

  1. $(document).ready(function(){  
  2.     var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  
  3.      $(".clickButton a").attr("href","javascript:return false;");   
  4.     var times = 1;  
  5.     function changeImage(){  
  6.         if (times == 6) {  
  7.              times = 1;  
  8.          }  
  9.          $(".clickButton a").removeClass("active");  
  10.          $(".clickButton a:nth-child(" + times + ")").addClass("active");  
  11.          $(".imgs img").attr("src",arryImgs[times-1]);  
  12.          times++;  
  13.      }  
  14.     var interval = window.setInterval(function(){  
  15.          changeImage();  
  16.      }, 1500);  
  17.      $(".clickButton a").each(function(index){  
  18.          $(this).hover(  
  19.             function(){  
  20.                  $(".clickButton a").removeClass("active");  
  21.                  $(this).addClass("active");  
  22.                  clearInterval(interval);  
  23.                  $(".imgs img").attr("src",arryImgs[index]);  
  24.                  times = index+1;      
  25.              },  
  26.             function(){  
  27.                  interval = window.setInterval(function(){  
  28.                      changeImage();  
  29.                  }, 1500);     
  30.              });   
  31.      });  
  32. })    

$(document).ready(function(){ var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"]; $(".clickButton a").attr("href","javascript:return false;"); var times = 1; function changeImage(){ if (times == 6) { times = 1; } $(".clickButton a").removeClass("active"); $(".clickButton a:nth-child(" + times + ")").addClass("active"); $(".imgs img").attr("src",arryImgs[times-1]); times++; } var interval = window.setInterval(function(){ changeImage(); }, 1500); $(".clickButton a").each(function(index){ $(this).hover( function(){ $(".clickButton a").removeClass("active"); $(this).addClass("active"); clearInterval(interval); $(".imgs img").attr("src",arryImgs[index]); times = index+1; }, function(){ interval = window.setInterval(function(){ changeImage(); }, 1500); }); }); })

不过那个js要放到后面，否在在ie8中要报错。可能是ie8加载的时候没有等到document加载后再ready。具体会包“return flase”在函数之外的错误。。。