无缝滚动：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0px; padding: 0px} 8 #div1{position: relative; border: 1px solid black; 680px; height: 170px; margin: 100px auto; overflow: hidden; } 9 #div1 ul{position: absolute; left: 0px} 10 #div1 ul li{list-style: none; float: left; 150px; height: 150px; padding: 10px} 11 #div1 ul li img{ 150px; height: 150px} 12 </style> 13 <script> 14 window.onload = function(){ 15 var oDiv = document.getElementById('div1'); 16 var oUl = oDiv.getElementsByTagName('ul')[0]; 17 var aLis = oUl.getElementsByTagName("li"); 18 19 oUl.innerHTML += oUl.innerHTML;//oUl的宽变成原来两倍（4张图片变8张） 20 21 oUl.style.width = aLis.length * aLis[0].offsetWidth + 'px'; 22 23 var timer = null; 24 timer = setInterval(function(){ 25 if(oUl.offsetLeft <= -oUl.offsetWidth / 2){ 26 oUl.style.left = 0; 27 } 28 oUl.style.left = oUl.offsetLeft - 2 + 'px'; 29 }, 30); 30 } 31 </script> 32 </head> 33 <body> 34 <div id = 'div1'> 35 <ul> 36 <li><img src="img/1.jpg" alt=""></li> 37 <li><img src="img/2.jpg" alt=""></li> 38 <li><img src="img/3.jpg" alt=""></li> 39 <li><img src="img/4.jpg" alt=""></li> 40 </ul> 41 </div> 42 </body> 43 </html>
浏览器效果：
无缝滚动—缓冲
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0px; padding: 0px} 8 #div1{position: relative; border: 1px solid black; 680px; height: 170px; margin: 100px auto;overflow: hidden;} 9 #div1 ul{position: absolute; left: 0px} 10 #div1 ul li{list-style: none; float: left; 150px; height: 150px; padding: 10px} 11 #div1 ul li img{ 150px; height: 150px} 12 </style> 13 <script src = '../startMove.js'></script> 14 <script> 15 window.onload = function(){ 16 var oDiv = document.getElementById('div1'); 17 var oUl = oDiv.getElementsByTagName('ul')[0]; 18 var aLis = oUl.getElementsByTagName("li"); 19 20 oUl.innerHTML += oUl.innerHTML;//oUl的宽变成原来两倍（4张图片变8张） 21 22 oUl.style.width = aLis.length * aLis[0].offsetWidth + 'px'; 23 24 var timer = null; 25 //启动定时器每隔3s切换一张图片 26 timer = setInterval(function(){ 27 //切换一张图片 28 startMove(oUl, {left: oUl.offsetLeft - 170}, function(){//到达ul的一半时，即第四长图片切换完后，一瞬间让ul从头开始运动 29 if(oUl.offsetLeft <= -oUl.offsetWidth / 2){ 30 oUl.style.left = "0px"; 31 } 32 }) 33 34 }, 3000); 35 } 36 </script> 37 </head> 38 <body> 39 <div id = 'div1'> 40 <ul> 41 <li><img src="img/1.jpg" alt=""></li> 42 <li><img src="img/2.jpg" alt=""></li> 43 <li><img src="img/3.jpg" alt=""></li> 44 <li><img src="img/4.jpg" alt=""></li> 45 </ul> 46 </div> 47 </body> 48 </html>
附件：startMove.js 文件
1 function startMove(node, json, complete){ //complete = show 2 clearInterval(node.timer); 3 node.timer = setInterval(function(){ 4 5 var isEnd = true; //假设都到达目的值了。 6 7 for(var attr in json){ 8 //1、获取当前的值 9 var iCur = null; 10 if(attr == "opacity"){ 11 iCur = parseInt(parseFloat(getStyle(node, attr)) * 100); 12 }else{ 13 iCur = parseInt(getStyle(node, attr)) 14 } 15 //2、计算速度 16 var speed = (json[attr] - iCur) / 8; 17 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 18 19 //3、运动和停止分开 20 21 if(attr == "opacity"){ 22 iCur += speed; 23 node.style.opacity = iCur / 100; 24 node.style.filter = "alpha(opacity=" + iCur + ")"; 25 }else{ 26 node.style[attr] = iCur + speed + "px"; 27 } 28 29 //如果这个if语句成立，说明至少有一个样式没到达目的值 30 if(json[attr] != iCur){ 31 isEnd = false; 32 } 33 34 } 35 if(isEnd){ 36 clearInterval(node.timer); 37 if(complete){ 38 complete(); 39 } 40 } 41 }, 30); 42 } 43 44 function getStyle(obj, attr){ 45 if(obj.currentStyle){ 46 return obj.currentStyle[attr]; 47 }else{ 48 return getComputedStyle(obj)[attr]; 49 } 50 }
浏览器效果：
附录：案例图片
再附件几张：
