最近没事的时候在研究jQuery,发现用jQuery实现图片轮播效果更加的简单、代码更少,现将源码粘贴出来供大家学习交流之用。

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 = ["p_w_picpaths/01.jpg","p_w_picpaths/02.jpg","p_w_picpaths/03.jpg","p_w_picpaths/04.jpg","p_w_picpaths/05.jpg"];   
  23.     $(".clickButton a").removeClass("active");   
  24.     $(element).addClass("active");   
  25.     $(".imgs img").attr("src",arryImgs[index]);   
  26. }  



鼠标停留版(参考malk的js改写的):
 

Javascript代码 复制代码
  1. $(document).ready(function(){   
  2.     var arryImgs = ["p_w_picpaths/01.jpg","p_w_picpaths/02.jpg","p_w_picpaths/03.jpg","p_w_picpaths/04.jpg","p_w_picpaths/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. })    

         一个完整的使用jQuery实现图片轮播示例:

<!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=gb2312" />
<title>jQuery实现图片轮播</title>
<style type="text/css">
<!--
div,a{margin:0;padding:0;}img{border:0px;}
.imgsBox{overflow:hidden;width:282px;height:176px;}
.imgs a{display:block;width:282px;height:164px;}
.clickButton{background-color:#888888;width:282px;height:12px;position:relative;top:-1px;_top:-5px;}
.clickButton div{float:right;}
.clickButton a{background-color:#666;border-left:#ccc 1px solid;line-height:12px;height:12px;font-size:10px;float:left;padding:0 7px;text-decoration:none;color:#fff;}
.clickButton a.active,.clickButton a:hover{background-color:#d34600;}
-->
</style>
</head>

<body>
<div class="imgsBox">
 <div class="imgs">
  <a href="#">
   <img id="pic" src="p_w_picpaths/01.jpg" width="282" height="164" />
  </a>
 </div>
 <div class="clickButton">
  <div>
   <a class="active" href="">1</a>
   <a class="" href="">2</a>
   <a class="" href="">3</a>
   <a class="" href="">4</a>
  </div>
 </div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(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%4+1)+")",i*3000);              
    }   
}   
  
function clickButton(index){   
    $(".clickButton a:nth-child("+index+")").click();   
}   
  
function changeImage(element,index){   
    var arryImgs = ["../p_w_picpath/01.jpg","../p_w_picpath/02.jpg","../p_w_picpath/03.jpg","../p_w_picpath/04.jpg"];   
    $(".clickButton a").removeClass("active");   
    $(element).addClass("active");   
    $(".imgs img").attr("src",arryImgs[index]);   
}
</script>
</html>