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