<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
background: #210856;
}
img{
width: 100%;
height: 100%;
display: block;
}
</style>
<script type="text/javascript">
window.onload=function(){
var curIndex = 0;
var timeInterval = 50;
var startIndex = 48;
var startInterval = 100;
var timer=null;
var imgId = document.getElementById("imgId");
var imgArr = [
"img/1.png",
"img/2.png",
"img/3.png",
"img/4.png",
"img/5.png",
"img/6.png",
"img/7.png",
"img/8.png",
"img/9.png",
"img/10.png",
"img/11.png",
"img/12.png",
"img/13.png",
"img/14.png",
"img/15.png",
"img/16.png",
"img/17.png",
"img/18.png",
"img/19.png",
"img/20.png",
"img/21.png",
"img/22.png",
"img/23.png",
"img/24.png",
"img/25.png",
"img/26.png",
"img/27.png",
"img/28.png",
"img/29.png",
"img/30.png",
"img/31.png",
"img/32.png",
"img/33.png",
"img/34.png",
"img/35.png",
"img/36.png",
"img/37.png",
"img/38.png",
"img/39.png",
"img/40.png",
"img/41.png",
"img/42.png",
"img/43.png",
"img/44.png",
"img/45.png",
"img/46.png",
"img/47.png",
"img/48.png",
"img/49.png",
"img/50.png",
"img/51.png",
"img/52.png",
"img/53.png",
"img/54.png",
"img/55.png",
"img/56.png",
"img/57.png",
"img/58.png",
"img/59.png",
"img/60.png",
"img/61.png",
"img/62.png",
"img/63.png",
"img/64.png",
"img/65.png",
"img/66.png",
"img/67.png",
"img/68.png"
];
timer = setInterval(startChangeImg,startInterval);
setTimeout(function(){
clearInterval(timer);
setInterval(changeImg,timeInterval);
},(imgArr.length - 48)*startInterval);
function changeImg(){
if(curIndex == imgArr.length-(imgArr.length -48)-1) {
curIndex = 0;
}else{
curIndex += 1;
}
imgId.src = imgArr[curIndex];
}
function startChangeImg(){
if(startIndex == imgArr.length-1) {
startIndex = 48;
}else{
startIndex += 1;
}
imgId.src = imgArr[startIndex];
}
}
</script>
</head>
<body>
<div><img id="imgId" src="img/49.png" alt="" /></div>
</body>
</html>
