前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 800px;
height: 400px;
background: pink;
float: left;
}
#wrap{
width: 940px;
margin: 20px auto;
overflow: hidden;
}
#wrap input{
display: block;
width: 100px;
height: 40px;
margin: 20px;
text-align: center;
}
.input{
width: 140px;
float: left;
padding-top: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="input">
<input type="button" value="点击播放" />
<input type="button" value="停止播放" />
</div>
<div id="div1"></div>
</div>
<script>
var arrUrl=['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230963&di=a7b0a176a6c25ec6a5bbfe0ebf00244d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.jschina.com.cn%2F0%2F10%2F49%2F73%2F10497332_169308.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230771&di=f2b78875a7a0aad0d912ec18ca24e757&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.51windows.net%2Fflower%2F_img%2FFlower_58526323.JPG','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488636196992&di=6356b814b7ad5123884ea4bc1595d8b0&imgtype=0&src=http%3A%2F%2Fm.tuniucdn.com%2Ffilebroker%2Fcdn%2Folv%2F1f%2F36%2F1f3610885cd4d11ed87293318ef1ca0c_w800_h0_c0_t0.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230783&di=eeb53155dcff68a49e648d611886e116&imgtype=jpg&er=1&src=http%3A%2F%2Fs1.lvjs.com.cn%2Fpics%2Fsuper%2F2014%2F03%2FFA3XB.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230824&di=6d53c4430f74b5120e12795bf31ba8b3&imgtype=jpg&er=1&src=http%3A%2F%2Fupload.univs.cn%2F2012%2F1101%2Fthumb_940__1351759545513.jpg'];
var aBtn=document.getElementsByTagName('input');
var timer=null;
var oDiv=document.getElementById('div1');
var num=0;
aBtn[0].onclick=function(){
clearInterval(timer); //开启前清一次
function play(){
oDiv.style.background='url('+arrUrl[num]+')';
num++;
num%=arrUrl.length;
}
timer=setInterval(play,2000);
}
aBtn[1].onclick=function(){
clearInterval(timer);
}
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 点击自动播放图片，网络图片，首次播放可能有点慢，缓存下来就是正常播放
