<!-- <!DOCTYPE html>
<html>
<head>
<title>原生JS實現圖片循環切換 —— 方法一</title>
<meta charset="utf-8"/>
<style type="text/css">
#img{
left:50%;
position: relative;
top:-50px;
}
</style>
</head>
<body>
<div id="div">
<img id="obj" src="">
</div>
<script type="text/javascript">
var arr=new Array();
arr[0]="../img/2.jpg";
arr[1]="../img/3.jpg";
arr[2]="../img/bg.jpg";
arr[3]="../img/1.jpg"
var curIndex=0;
setInterval(function(){
#通過數組將圖片的src屬性進行修改
var obj=document.getElementById("obj");
//var img=document.getElementById("img");
if(curIndex==arr.length-1){
curIndex=0;
}
else{
curIndex+=1;
}
obj.src=arr[curIndex];
console.log(curIndex);
},2000)
</script>
</body>
</html> -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生JS實現圖片循環切換 —— 方法二</title>
<script type="text/javascript">
var NowImg=1;//表示當前顯示的div
var MaxImg=4;//表示div的個數
setInterval(function(){
#通過更改元素的display屬性來設置顯示的圖片
for(var i=1;i<=MaxImg;i++){
if(NowImg==i)
document.getElementById("div"+NowImg).style.display='block';//當前顯示的div
else
document.getElementById("div"+i).style.display='none';
}
if(NowImg==MaxImg)//判斷當前div是否是最后一個，如果是則從第一個重新輪回顯示
NowImg=1;
else
NowImg++;//設置下一個顯示的圖片
},1000)
</script>
</head>
<body>
<div>
<div id="div1" style="display:block;"><img src="../img/2.jpg" /></div>
<div id="div2" style="display:none;"><img src="../img/1.jpg" /></div>
<div id="div3" style="display:none;"><img src="../img/3.jpg" /></div>
<div id="div4" style="display:none;"><img src="../img/bg.jpg" /></div>
</div>
</div>
<body>
</html>
