俗话说：‘能用css解决的动画，绝不用js来实现’
下面是利用 css中的 animation 实现跑马灯效果
这个我采了坑 ，to {left:1500px},这里的距离是所有图片的宽度（不包含无缝复制的哈）
我一直设置的是container 一屏的宽度，一直不流畅。所以在此纪录下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东跑马灯</title> <style> .container { box-sizing: border-box; overflow: hidden; position: relative; width: 1000px; height: 200px; margin: 50px auto 0px; border: 1px solid red; } .container .wrapper { position: absolute; top: 0px; left: 0px; box-sizing: border-box; width: 2200px; height: 200px; } .container .wrapper .slider { box-sizing: border-box; float: left; width: 200px; height: 200px; padding: 10px 20px; } .container .wrapper .slider span { display: block; /* 不换行三件套 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .container .wrapper .slider img { width: 150px; height: 150px; } .container .wrapper { animation: test 5s infinite linear; } @keyframes test { from { left: 0px; } to { left: -1200px; } } .container:hover .wrapper { animation-play-state: paused; } </style> </head> <body> <div class="container "> <div class="wrapper "> <!-- 每一张图片slider --> <div class="slider"> <span>天地壹号 清爽酸甜 苹果醋22222222222</span> <img src="./img/2.jpg" alt="js 小案例 跑马灯效果"> </div> <div class="slider"> <img src="./img/3.jpg" alt="js 小案例 跑马灯效果"> <span>天地壹号 清爽酸甜 苹果醋</span> </div> <div class="slider"> <span>天地壹号 清爽酸甜 苹果醋</span> <img src="./img/4.jpg" alt="js 小案例 跑马灯效果"> </div> <div class="slider"> <img src="./img/5.jpg" alt="js 小案例 跑马灯效果"> <span>天地壹号 清爽酸甜 苹果醋</span> </div> <div class="slider"> <img src="./img/6.jpg" alt="js 小案例 跑马灯效果"> <span>天地壹号 清爽酸甜 苹果醋</span> </div> <div class="slider"> <img src="./img/7.jpg" alt="js 小案例 跑马灯效果"> <span>天地壹号 清爽酸甜 苹果醋</span> </div> <!-- 无缝的 --> <div class="slider"> <span>天地壹号 清爽酸甜 无缝的苹果醋</span> <img src="./img/2.jpg" alt="js 小案例 跑马灯效果"> </div> <div class="slider"> <img src="./img/3.jpg" alt="js 小案例 跑马灯效果"> <span>天地壹号 清爽酸甜 苹果醋</span> </div> <div class="slider"> <span>天地壹号 清爽酸甜 苹果醋</span> <img src="./img/4.jpg" alt="js 小案例 跑马灯效果"> </div> <div class="slider"> <img src="./img/5.jpg" alt="js 小案例 跑马灯效果"> <span>天地壹号 清爽酸甜 苹果醋</span> </div> </div> </div> </body> </html>当然你也可以使用js代码实现哦！html和css是一样的
var wrapper = document.querySelector('.wrapper'), timer = null, step = -10, left = 0; window.onload = function () { timer = setInterval(autoMove, 100) } function autoMove() { left = getCss(wrapper, 'left'); left += step if (left < -1200) { wrapper.style.left = 0 + 'px'; wrapper.style.transition = 'all 0s' left = getCss(wrapper, 'left'); } console.log(left); wrapper.style.left = left + 'px'; wrapper.style.transition = 'all .3s' } function getCss(culEle, attr) { return parseFloat(window.getComputedStyle(culEle, null)[attr]); }