<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; background-color: #5e5e5e; } #box{ width: 857px; height: 574px; padding-top: 126px; padding-left:143px; background: url(img/bg.png) no-repeat; margin: 0px auto; } #wrap{ width: 700px; height: 420px; } #wrap div{ width: 10px; height: 420px; background: url(img/01.png) no-repeat; float: left; transition: .5s; } </style> </head> <body> <div id="box"> <div id="wrap"> <!-- <div style="background-position-x: 0px"></div> <div style="background-position-x: -10px"></div> <div style="background-position-x: -20px"></div> <div style="background-position-x: -30px"></div>--> </div> </div> <script> window.onload = function(){ // 第一步动态创建70个子div，然后利用背景图片拼出完整的图片 var wrap = document.getElementById('wrap'); var str = ""; var len = 70; // 动态创建70个子div存在str变量中，并添加到wrap里面 for (var i = 0; i < len; i++) { str += '<div style="background-position-x: '+(-10*i)+'px"></div>'; }; wrap.innerHTML = str; var divs = wrap.getElementsByTagName('div'); var srcNum = 2; var timer; var num = 0; // 让第一张图子元素慢慢隐藏，第二张图子元素慢慢显示 function tab(n){ // 如果上一个子div存在 if(divs[n-1]){ divs[n-1].style.opacity = 1; } // 如果当前子div存在 if(divs[n]){ divs[n].style.opacity = 0; divs[n].style.backgroundImage ='url(img/0'+srcNum+'.png)'; } }; move(); // 封装一个move函数 function move(){ timer = setInterval(function(){ tab(num); num++; console.log(num); //这里可以发现num在不停的变大，定时器没有关掉，得做判断 if(num == 71){ clearInterval(timer); num = 0; // 这里可以看到切换到第二张图就不动了，这里就得改变图片的src srcNum ++; if(srcNum == 6){ srcNum = 1; } } },70); }; setTimeout(move,500); }; </script> </body> </html>