<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.container {
width: 400px;
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.swiper {
width: 2400px;
height: 300px;
position: absolute;
left: -400px;
}
.swiper img {
float: left;
width: 400px;
height: 300px;
}
@font-face {
font-family: "arraw";
src: url(font/iconfont.ttf);
}
.but {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-family: "arraw";
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 135px;
color: white;
}
#prev {
left: 10px;
cursor: pointer;
}
#next {
right: 10px;
cursor: pointer;
}
.dots {
width: 400px;
height: 30px;
/* background-color: pink; */
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 15px;
}
.dot:hover {
cursor: pointer;
}
.checked {
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="container">
<!-- 图片 -->
<div class="swiper">
<img src="img/baby.png" alt="">
<img src="img/迪丽热巴.png" alt="">
<img src="img/谭松韵。.png" alt="">
<img src="img/zly.png" alt="">
<img src="img/baby.png" alt="">
<img src="img/迪丽热巴.png" alt="">
</div>
<!-- 按钮 -->
<div id="prev" class="but" onclick="prev()"></div>
<div id="next" class="but" onclick="next()"></div>
<!-- 显示点 -->
<div class="dots">
<div class="dot checked" onclick="toScroll(1)"></div>
<div class="dot" onclick="toScroll(2)"></div>
<div class="dot" onclick="toScroll(3)"></div>
<div class="dot" onclick="toScroll(4)"></div>
</div>
</div>
</body>
<script>
var dSwiper = document.querySelector('.swiper');
var dDots = document.querySelectorAll('.dot');
// 1.自动 每5秒自动轮播到下一张
// 2.手动 点击按钮发生动作
var timer = null; // 每5秒
var swiperTimer = null; //切换
var showIndex = 1; // 当前显示图片的下标
var myWidth = 400; //单位宽度
var autoCount = 0 //自动轮播计数
// 自动轮播
timer = setInterval(function () {
autoCount++;
if (autoCount === 10) {
autoCount = 0;
next();
}
}, 500)
// 下一张
function next() {
toScroll(showIndex + 1);
}
// 上一张
function prev() {
toScroll(showIndex - 1);
}
// 轮播的函数
function toScroll(targetIndex) {
autoCount = 0;
// 完成两张图片的切换
// 路程
var s = -1 * targetIndex * myWidth - dSwiper.offsetLeft;
var t = 20; // swiperTime执行20次完成图片切换
var v = s / t;
var count = 0;
clearInterval(swiperTimer);
swiperTimer = setInterval(function () {
count++;
var l = dSwiper.offsetLeft + v;
dSwiper.style.left = l + 'px';
if (count === t) {
// 完成了切换
clearInterval(swiperTimer);
if (targetIndex === 0) {
// 需要跳转到倒数第2张
targetIndex = 4;
} else if (targetIndex === 5) {
// 需要跳转到第二张
targetIndex = 1;
}
// 防止出现偏差
dSwiper.style.left = -1 * targetIndex * myWidth + 'px';
// 上一个点
dDots[showIndex - 1].className = "dot";
// 更改showIndex的值
showIndex = targetIndex;
// 当前点
dDots[showIndex - 1].className = "dot checked";
}
}, 30)
}
</script>
</html>
点击左右箭头会相应变换
点击小圆点会相应变换
会自动轮播
效果展示: