图片依桢播放
<!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>