首先，先来看走马灯效果展示
源码如下：
参考：HTML5+CSS3+JS小实例：可切换方向的无缝衔接图片滚动效果_哔哩哔哩_bilibili
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>可切换方向的无缝衔接图片滚动效果</title>
<link rel="stylesheet" href="149.css">
</head>
<body>
<div class="app">
<div class="container">
<ul>
<li><img src="/images/a.JPG" alt=""></li>
<li><img src="/images/b.JPG" alt=""></li>
<li><img src="/images/c.JPG" alt=""></li>
<li><img src="/images/d.JPG" alt=""></li>
</ul>
</div>
</div>
<script src="149.js"></script>
</body>
</html>css
* {
/* 初始化 */
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.app {
/* 100%窗口高度 */
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 弹性布局 居中显示 */
display: flex;
justify-content: center;
align-items: center;
background-color: #1b1b1b;
}
.container {
width: 800px;
/* 相对定位 */
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
ul {
width: 800px;
height: 150px;
overflow: hidden;
display: flex;
position: relative;
}
li {
list-style: none;
height: 100%;
padding-right: 20px;
}
li img {
width: 200px;
height: 150px;
/* 保持原有尺寸比例，裁切长边 */
object-fit: cover;
/* 图片定位正中间 */
object-position: center;
}
.btns {
display: flex;
justify-content: center;
padding-top: 50px;
}
.btn {
color: #fff;
border: 1px solid #ddd;
padding: 5px 15px;
margin: 0 15px;
border-radius: 3px;
font-size: 14px;
cursor: pointer;
}
.btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
js
// 获取ul元素，并为其追加一组相同图片（为了做到无缝衔接）
let ul = document.querySelector('ul');
ul.innerHTML = ul.innerHTML + ul.innerHTML;
// 获取所有的li元素和.btn元素
let lis = document.querySelectorAll('li');
// 每次滚动的跨度（正数向右，负数向左，默认向左滚动）
let spa = -2;
// 计算并设置ul的总宽度
ul.style.width = lis[0].offsetWidth * lis.length + 'px';
// 滚动函数
function move() {
if (ul.offsetLeft < -ul.offsetWidth / 2) {
// 向左走时，判断图片是否走完（这里本来时4张图片，加上后面追加的4张相同的，共有8张，所以需要用ul的总宽度来除以2进行判断），走完时重新开始
ul.style.left = '0';
}
if (ul.offsetLeft > 0) {
// 向右走时，判断图片是否走完
ul.style.left = -ul.offsetWidth / 2 + 'px';
}
// 设置偏移位置
ul.style.left = ul.offsetLeft + spa + 'px';
}
// 定时器，每30毫秒执行一次move函数
let timer = setInterval(move, 30);
// 为ul绑定事件，悬停停止，移开滚动
ul.addEventListener('mousemove', function () {
clearInterval(timer);
})
ul.addEventListener('mouseout', function () {
timer = setInterval(move, 10);
})
