js图片轮换效果

常常在各大网站上看到如下图所示的图片轮换效果，有的是用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); }); }); })

• 
• 大小: 54.4 KB

• display_imgs.zip (118.4 KB)
• 下载次数: 446

• display_imgs_鼠标停留版_.zip (118.5 KB)
• 下载次数: 266

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