一、通过数组将图片的src属性进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#div{
width: 1100px;
height: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="div">
<img id="obj" src="img/chuanqi.jpg">
</div>
</body>
<script>
var arr=new Array();
arr[0]="img/fengkuang.jpg";
arr[1]="img/chuanqi.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>
</html>
二、通过更改元素的display属性来设置显示的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div id="div1" style="display:block;"><img src="img/fengkuang.jpg" /></div>
<div id="div2" style="display:none;"><img src="img/chuanqi.jpg" /></div>
<div id="div3" style="display:none;"><img src="img/fengkuang.jpg" /></div>
<div id="div4" style="display:none;"><img src="img/chuanqi.jpg" /></div>
</div>
</body>
<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>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)