俗话说：‘能用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]);
}