有时间我再讲解思路，直接上代码吧：
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>无缝轮播图</title>
<link rel="stylesheet" href="/common/css/reset.css" />
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="swiper-wrapper">
<!-- 这里只是我写样式的时候方便看效果，这些都是由js生成，所以我写完就注释了 -->
<!-- <div class="swiper-item"><img src="" alt="" /></div> -->
</div>
<div class="indicator">
<div class="indicator-item active"></div>
<div class="indicator-item"></div>
<div class="indicator-item"></div>
<div class="indicator-item"></div>
<div class="indicator-item"></div>
</div>
<div class="arrow-wrapper">
<div class="arrow-left"><</div>
<div class="arrow-right">></div>
</div>
</div>
<script src="/common/js/animate.js"></script>
<script src="./index.js"></script>
</body>
</html>
CSS
.container {
width: 900px;
height: 600px;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
position: relative;
}
.swiper-wrapper {
width: 10000px;
height: 600px;
background: #ccc;
}
.swiper-item {
display: inline-block;
width: 900px;
height: 600px;
background: #ccc;
text-align: center;
line-height: 600px;
font-size: 50px;
}
.swiper-item img {
object-fit: cover;
width: 100%;
height: 100%;
}
.indicator {
width: 100%;
height: 30px;
/* background: #4b42c4; */
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.indicator .indicator-item {
display: inline-block;
width: 40px;
height: 4px;
background: #333;
line-height: 30px;
cursor: pointer;
}
.indicator .indicator-item.active {
background: brown;
}
.arrow-wrapper {
height: 100%;
}
.arrow-left,
.arrow-right {
height: 600px;
width: 60px;
background: rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 600px;
font-size: 26px;
opacity: 0;
color: #fff;
cursor: pointer;
user-select: none;
}
.arrow-left {
position: absolute;
left: 0;
top: 0;
}
.arrow-right {
position: absolute;
right: 0;
top: 0;
}
.arrow-left:hover,
.arrow-right:hover {
opacity: 1;
}
JS
index.js
.container {
width: 900px;
height: 600px;
/* background: #000; */
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
position: relative;
}
.swiper-wrapper {
width: 10000px;
height: 600px;
background: #ccc;
}
.swiper-item {
display: inline-block;
width: 900px;
height: 600px;
background: #ccc;
text-align: center;
line-height: 600px;
font-size: 50px;
}
.swiper-item img {
object-fit: cover;
width: 100%;
height: 100%;
}
.indicator {
width: 100%;
height: 30px;
/* background: #4b42c4; */
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.indicator .indicator-item {
display: inline-block;
width: 40px;
height: 4px;
background: #333;
line-height: 30px;
cursor: pointer;
}
.indicator .indicator-item.active {
background: brown;
}
.arrow-wrapper {
height: 100%;
}
.arrow-left,
.arrow-right {
height: 600px;
width: 60px;
background: rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 600px;
font-size: 26px;
opacity: 0;
color: #fff;
cursor: pointer;
user-select: none;
}
.arrow-left {
position: absolute;
left: 0;
top: 0;
}
.arrow-right {
position: absolute;
right: 0;
top: 0;
}
.arrow-left:hover,
.arrow-right:hover {
opacity: 1;
}
animate.js
// 动画的本质，是让某个数据从初始值逐渐变化到目标值，是让一个大变化拆分成很多个小步来执行，一次变化一点，从而形成连贯的感觉。
function animate(option) {
var from = option.from //初始值
var to = option.to //目标值
var totalDuration = option.totalDuration || 500 //动画总持续时间
var singleDuration = option.singleDuration || 10 //单步持续时间
var onAnimate = option.onAnimate //单步动作内容（要干的事情）
var onEnd = option.onEnd //动画结束回调
var currentValue = from //当前值
var totalSteps = Math.floor(totalDuration / singleDuration) //总需步数
var currentStep = 0 //当前步数
var distance = to - from //总变化值
var singleStepDistance = distance / totalSteps //单次变化值
var timerId = setInterval(() => {
currentStep++
if (currentStep < totalSteps) {
currentValue += singleStepDistance
} else {
currentValue = to
clearInterval(timerId)
onEnd()
}
onAnimate && onAnimate(currentValue)
}, singleDuration);
}
