滚动轮播图原理：
以本文为例，想要实现视觉上的无缝隙滚动轮播，就需要在第四张图后，再添加第一张和第二张图，因为本文的案例是同时显示两张图片，如果只显示一张图，那么就在最后一张图后添加第一张图就可以了。
接下来，我们一起来看代码，其它解释会在代码注释里有所体现。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
/* 去除图片边距 */
img {
vertical-align: top;
}
.box {
width: 600px;
height: 200px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.box ul li {
float: left;
}
/* 滚动的不是图片本身，而是包裹着图片的盒子 */
.box ul {
width: 400%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];
var timer = null; // 定义定时器名字
var count = 0; // 控制左偏移量
timer = setInterval(autoPlay, 30); // 开启定时器
function autoPlay() {
count--;
count <= -1200 ? count = 0 : count; // 当count小于-1200时，让count等于0，否则，继续--
ul.style.left = count + "px";
}
scroll.onmouseover = function () { // 鼠标悬浮停止定时器
clearInterval(timer);
}
scroll.onmouseout = function () {
timer = setInterval(autoPlay, 30); // 鼠标离开开启定时器
}
</script>
</body>
</html>
网友评论