html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图最佳实现方案</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div class="container">
<div id="img-list" style="left:0;">
<img class="current-img" src="http://127.0.0.1:5500/images/1.jpg">
<img class="current-img" src="http://127.0.0.1:5500/images/2.jpg">
<img class="current-img" src="http://127.0.0.1:5500/images/3.jpg">
<img class="current-img" src="http://127.0.0.1:5500/images/4.jpg">
<img class="current-img" src="http://127.0.0.1:5500/images/5.jpg">
<img class="current-img" src="http://127.0.0.1:5500/images/1.jpg">
</div>
</div>
<div class="btn-box">
<span class="prev-btn">上一个</span>
<span class="next-btn">下一个</span>
</div>
<script src="./index.js"></script>
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
.container{
width: 960px;
height: 320px;
overflow: hidden;
margin: 0 auto;
}
#img-list{
display: flex;
position: relative;
}
.btn-box{
width: 960px;
margin: 0 auto;
cursor: pointer;
}
// 图片列表
let imgList = document.querySelector('#img-list');
// 上一个按钮
let prevBtn = document.querySelector('.prev-btn');
// 下一个按钮
let nextBtn = document.querySelector('.next-btn');
// 所有图片集合
let allImgList = [
'http://127.0.0.1:5500/images/1.jpg',
'http://127.0.0.1:5500/images/2.jpg',
'http://127.0.0.1:5500/images/3.jpg',
'http://127.0.0.1:5500/images/4.jpg',
'http://127.0.0.1:5500/images/5.jpg',
'http://127.0.0.1:5500/images/1.jpg',
];
// 图片宽度
let actWidth = imgList.querySelector('img').offsetWidth;
// 点击 上一个按钮
prevBtn.onclick = throttle(toPreImg, 500);
function toPreImg() {
let left = imgList.style.left;
left = Number(left.slice(0, left.length - 2));
if((left + actWidth) > 0){
// 实现无缝循环的关键
// 图片按照 1 2 3 4 5 *1 的顺序布局
// 要从 1 切换到5 需要无动画的将 left 设置到 *1 处
imgList.style.transition = "none";
left = - (actWidth * (allImgList.length-1));
imgList.style.left = left + 'px';
}
setTimeout(function () {
imgList.style.transition = "all .5s ease-in .1s";
imgList.style.left = left + actWidth + 'px';
}, 1)
}
// 点击 下一个按钮
nextBtn.onclick = throttle(toNextImg, 500);
function toNextImg() {
let left = imgList.style.left;
left = Number(left.slice(0, left.length - 2));
if((left - actWidth) === -(actWidth * allImgList.length)){
// 实现无缝循环的关键
// 图片按照 1 2 3 4 5 *1 的顺序布局
// 要从 *1 切换到2 需要无动画的将 left 设置到 1 处
imgList.style.transition = "none";
left = 0;
imgList.style.left = left;
}
setTimeout(function () {
imgList.style.transition = "all .5s ease-in .1s";
imgList.style.left = (left - actWidth) + 'px';
}, 1)
}
// 节流函数
function throttle(func, wait) {
var context, args;
var old = 0;
return function() {
var now = +new Date();
context = this;
args = arguments;
if (now - old > wait) {
func.apply(context, args);
old = now;
}
}
}