<!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>slider</title>
<style>
/* 轮播图容器 */
.slider {
width: 600px;
height: 400px;
margin: auto;
position: relative;
overflow: hidden;
/* 图片剪裁 */
}
/* 图片容器 */
.slider-img {
position: absolute;
top: 0;
left: 0;
width: 800%;
/* 八张图,所以八倍的轮播图容器大小 */
height: 400px;
transition: all 1s;
}
/* 单张图片 */
.slider-img img {
width: 12.5%;
/* 八分之一的图片容器大小 */
height: 400px;
float: left;
object-fit: cover;
/* 图片适应 */
}
/* 按钮容器 */
.slider-btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
/* 按钮位置位于中间 l+tran */
}
/* 单个按钮 */
.slider-btn li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
border: none;
margin-right: 10px;
cursor: pointer;
transition: all 0.3s;
}
/* 当前按钮 */
.slider-btn li.active {
background-color: rgba(0, 0, 0, 0.8);
}
li {
list-style: none;
float: left;
}
</style>
</head>
<body>
<!-- 轮播图容器 -->
<div class="slider">
<!-- 图片容器 -->
<div class="slider-img">
<img src="img/img.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img.jpg" alt="">
<img src="img/img2.jpg" alt="">
</div>
<!-- 按钮容器 -->
<ul class="slider-btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 获取元素
var sliderImg = document.querySelector('.slider-img');
// 选择器".slider-img"代表轮播图区域
var sliderBtn = document.querySelectorAll('.slider-btn li');
// 选择器".slider-btn li"代表轮播图按钮
var len = sliderBtn.length;//轮播图按钮个数
var index = 0; // 当前显示的图片索引
// 定时器,2k秒自动切换
var timer = setInterval(function () {
index++;
// i++,显示下一张图
if (index >= len) {
index = 0;
}
changeImg();
}, 2000);
// 按钮点击事件
for (var i = 0; i < len; i++) {
sliderBtn[i].onclick = function () {
// 点击按钮时,清除定时器,停止自动播放
clearInterval(timer);
// 更新图片索引为当前按钮所代表的值
index = this.getAttribute('data-index');
// 调用changeImg,更新轮播图
changeImg();
// 定时器,自动播放
timer = setInterval(autoPlay, 2000);
}
// 再次设置计时器,以便接着从当前图片继续自动播放
sliderBtn[i].setAttribute('data-index', i);
}
// 切换图片
function changeImg() {
// 图片向左偏移 偏移量为 -(index*100/len)%
sliderImg.style.transform = 'translateX(-' + index * 100 / len + '%)';
for (var i = 0; i < len; i++) {
// 取消之前激活的按钮的active类,将按钮激活状态设置为当前按钮
sliderBtn[i].classList.remove('active');
}
// 添加类名.active
sliderBtn[index].classList.add('active');
}
</script>
</body>
</html>
轮播图,不用谢
猜你喜欢
转载自blog.csdn.net/weixin_56105633/article/details/130682668
今日推荐
周排行