jquery實現圖片輪播效果

時間 2021-08-12

標籤 javascript css html java jquery ide 學習 this spa 欄目 JQuery 简体版

原文原文鏈接

最近沒事的時候在研究jQuery，發現用jQuery實現圖片輪播效果更加的簡單、代碼更少，現將源碼粘貼出來供你們學習交流之用。

js以下：

javascript

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%5+1)+")",i*3000);
}
}
function clickButton(index){
$(".clickButton a:nth-child("+index+")").click();
}
function changeImage(element,index){
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"];
$(".clickButton a").removeClass("active");
$(element).addClass("active");
$(".imgs img").attr("src",arryImgs[index]);
}

$(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 = ["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"];
	$(".clickButton a").removeClass("active");
	$(element).addClass("active");
	$(".imgs img").attr("src",arryImgs[index]);
}

鼠標停留版（參考malk的js改寫的）：
css

Javascript代碼

$(document).ready(function(){
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"];
$(".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);
});
});
})

一個完整的使用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=gb2312" />
<title>jQuery實現圖片輪播</title>
<style type="text/css">

</style>
</head>java

<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>jquery