JS圖片自動輪換效果實(shí)現(xiàn)思路附截圖

2024-05-06 16:04:52

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動輪換效果，有具體的實(shí)現(xiàn)思路及截圖，希望對大家學(xué)習(xí)有所幫助

今天不在狀態(tài)，安靜五一快到了，俺就特想玩了。好了，天色已晚，閑話不多說，看下用javaScript 實(shí)現(xiàn)的圖片自動輪換效果，先看圖片

下面是具體的代碼，還是比較簡單的。

復(fù)制代碼代碼如下:

<!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=UTF-8" />
<title>越獄的囚徒</title>
<style type="text/css">
.content{
border:3px solid red;
padding:3px;
width:500px;
height:245px;
position:relative;
}
.content img{
border:0;

}
.content div{
position:absolute;
z-index:1000;
border:2px solid green;
padding:3px 5px;
background:#ccc;
}
.content .cur{background:red;color:white;}//當(dāng)前顯示的圖片的小方塊，紅色背景白色字體
</style>
<script type="text/javascript">
var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg'];
var i=0;
var ob,obk;
function lunhuan(){

if(i>4){//數(shù)字大于4就從0開始
i=0;
}
ob=document.getElementById("image1");
ob.src=arr[i];
//所有div-0到div-4，背景顏色置灰
for(var j=0;j<=4;j++){
document.getElementById("div-"+j).style.backgroundColor='#ccc';
document.getElementById("div-"+j).style.color='black';
}
obk=document.getElementById("div-"+i);
obk.style.backgroundColor='red';
obk.style.color='white';
i++;
}
</script>
</head>
<body>
<div>
<img src="images/1.jpg"/>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<input type="button" value="test"/>
</body>
</html>