滚动图，本例为4张图片循环滚动，鼠标悬停会将图片停止滚动，将其他图片来一个灰色遮罩，主要用到排他思想。为什么4张图片，我的图片列表为什么会有6张图片呢？其实第5,6张图片和第1,2张图片是完全一样的。如果不放这两张图片，无限滚动滚到第四张结束之后再跳回第一张图片时，会有一个空隙，闪一下。大家一做便知。 源码中的知识点笔者在前几篇博客中都有讲到。欢迎提问，留言私信都可，觉得不错点个赞吧~！
效果图
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限滚动
</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 768px;
height: 216px;
border: 1px solid #000;
margin: 200px auto;
overflow: hidden;
}
.wrapper > ul {
width: 2304px;
height: 216px;
list-style: none;
background-color: #666;
}
.wrapper li {
float: left;
}
.wrapper li > img {
width: 384px;
height: 216px;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function () {
var ul = $('ul');
var lis = $('li');
var offset = 0;
var offsetMax = parseInt($('img').css('width').substring(0, 3)) * 4;
var timer = setInterval(autoPlay, 10);
autoPlay();
lis.hover(function () {
clearInterval(timer);
$(this).siblings().fadeTo(100, .5);
$(this).fadeTo(100, 1);
}, function () {
timer = setInterval(autoPlay, 10);
lis.fadeTo(100, 1);
})
function autoPlay() {
offset -= 2;
if (offset <= -offsetMax) {
offset = 0;
}
ul.css('marginLeft', offset);
}
});
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li><img src="img/tabl/wallhaven-139z5g.jpg" alt=""></li>
<li><img src="img/tabl/wallhaven-dgl7rm.jpg" alt=""></li>
<li><img src="img/tabl/Ebrsuz4XQAcHWoM.jpg" alt=""></li>
<li><img src="img/tabl/EdsvmEqWoAI4nsp.jpg" alt=""></li>
<li><img src="img/tabl/wallhaven-139z5g.jpg" alt=""></li>
<li><img src="img/tabl/wallhaven-dgl7rm.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
