实现后的效果（Gif图片）
直接复制代码到一个新的Html页面即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slide</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.slide_show_view {
width: 200px;
height: 100px;
background-color: skyblue;
margin: 0 auto;
margin-top: 200px;
position: relative;
overflow: hidden;
}
.slide_show_list {
list-style: none;
position: absolute;
left: 0px;
width: 1200px;
height: 100px;
display: flex;
}
.slide_show_list li {
width: 200px;
height: 100px;
background-color: rgba(105, 90, 205, 0.363);
line-height: 100px;
text-align: center;
font-size: 34px;
font-weight: 800;
color: #fff;
}
</style>
<body>
<!-- 类似相框的作用 -->
<div class="slide_show_view">
<!-- 轮播图盒子,里面li的数量决定了这个盒子的宽度 -->
<ul class="slide_show_list" id="slideShowList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script>
// 获取轮播图盒子
const slideBox = document.getElementById('slideShowList');
// 获取所有轮播图的图片(这里直接用li代替)
const slideItemList = slideBox.getElementsByTagName('li');
// 复制第一个图片
const firstSlideItem = slideItemList[0].cloneNode(true);
// 将复制的第一张图添加到这个图片列表的最后面
slideBox.appendChild(firstSlideItem);
// 定义初始值(轮播图盒子在相框中的偏移量)
let leftNumber = 0;
// 定义移动一个图片的函数
function slide() {
// 记录移动次数
let sum = 0;
const timer = setInterval(() => {
// 每次移动10px的偏移量
leftNumber += 10;
// 记录当前移动次数
sum++;
// 移动盒子
slideBox.style.left = `-${leftNumber}px`;
// 一个图片的宽度是200,每次移动10,需要移动二十次才相当于轮播了一个图片
// 所以在移动次数到达20次的时候,清除这个定时器
if (sum === 20) {
clearInterval(timer);
}
// 定时器的时间为50ms执行一次,
// 实现的效果是一秒轮播一个图片。所以 1000ms / 20(移动次数) = 50ms
}, 50)
}
// 定义定时器，每2s执行一次移动函数，因为图片移动200需要1s，所以这里要超过1s才可以
setInterval(() => {
slide();
// 每次移动完轮播图后判断偏移量,如果当前显示到第最后一个复制的图片,直接把偏移量重置,轮播图盒子重置即可
setTimeout(() => {
if (leftNumber === 1000) {
slideBox.style.left = `0px`;
leftNumber = 0;
}
// 这里的1100只要在1s - 2s之间都可以
}, 1100)
}, 2000);
</script>
</html>
网友评论