下面是“JS实现无缝轮播图”的完整攻略:
目录
- 需求分析
- HTML结构构建
- CSS样式定义
- JS实现无缝轮播图
1. 需求分析
在实现无缝轮播图前,我们需要先分析需求,包括:
- 实现自动轮播效果
- 点击箭头进行轮播切换
- 延迟轮播时间,停留在当前轮播图上
- 实现首尾轮播切换时无缝连接
2. HTML结构构建
在分析需求后,我们需要搭建html结构,基本代码如下:
<div class="carousel">
<ul class="img-box">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>
<ul class="btn-box">
<li class="btn active"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
<div class="arrow-box">
<div class="left-arrow"><</div>
<div class="right-arrow">></div>
</div>
</div>
其中img-box
用来呈现轮播图,btn-box
用来显示当前轮播图位置,arrow-box
用来存放箭头。
3. CSS样式定义
在html构建完成后,定义CSS样式使得页面结构排版合理,样式代码如下:
.carousel {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
margin: 0 auto;
}
.img-box {
position: relative;
list-style: none;
width: 600%;
height: 400px;
margin: 0;
padding: 0;
left: 0;
transition: left 0.5s ease-in-out;
}
.img-box li {
position: relative;
float: left;
width: 16.66667%;
height: 400px;
}
.img-box li img {
width: 100%;
height: 100%;
}
.btn-box {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.btn {
position: relative;
display: inline-block;
width: 8px;
height: 8px;
margin: 0 5px;
background: #ccc;
border-radius: 50%;
cursor: pointer;
}
.btn.active {
background: #f40;
}
.arrow-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 35px;
height: 60px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.arrow-box:hover {
opacity: 1;
}
.left-arrow,
.right-arrow {
position: absolute;
top: 50%;
margin-top: -15px;
width: 16px;
height: 30px;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 30px;
background: #000;
cursor: pointer;
z-index: 99;
}
.left-arrow {
left: 0;
}
.right-arrow {
right: 0;
}
4. JS实现无缝轮播图
在html和css都已经完成后,使用JS实现“无缝轮播”的功能。首先我们需要获取所有需要操作的元素。
let carousel = document.querySelector('.carousel');
let imgBox = document.querySelector('.img-box');
let imgList = document.querySelectorAll('.img-box li');
let btnList = document.querySelectorAll('.btn-box .btn');
let arrowBox = document.querySelector('.arrow-box');
let leftArrow = document.querySelector('.left-arrow');
let rightArrow = document.querySelector('.right-arrow');
获取到元素后,需要给每个位置按钮icon绑定点击事件,触发点击事件后会跳转到对应的位置。
for (let i = 0; i < btnList.length; i++) {
btnList[i].onclick = function () {
// 切换轮播图片位置
imgBox.style.left = -i * imgList[0].offsetWidth + 'px';
// 切换当前位置按钮的active类名
for (let j = 0; j < btnList.length; j++) {
btnList[j].classList.remove('active');
}
btnList[i].classList.add('active');
// 获取当前显示的图片位置
curIndex = i;
}
}
接着,通过定时器自动轮播,切换图片位置。同时,在首尾轮播切换时,通过JS动态添加和删除节点,实现无缝连接效果。
// 设置定时器自动轮播
let timer = setInterval(() => {
// 判断当前是否为最后一张图片,如果是则返回第一张图片
if (curIndex === imgList.length - 1) {
imgBox.appendChild(imgList[0].cloneNode(true));
// 过渡效果结束后,删除clone的图片节点,保证轮播的正常性
imgBox.addEventListener('transitionend', function () {
imgBox.removeChild(imgList[imgList.length - 1]);
// 过渡完毕后索引设为0
curIndex = 0;
}, false);
} else {
curIndex++;
}
// 根据当前位置的变化,切换轮播图
imgBox.style.left = -curIndex * imgList[0].offsetWidth + 'px';
// 切换当前位置按钮的active类名
for (let j = 0; j < btnList.length; j++) {
btnList[j].classList.remove('active');
}
btnList[curIndex].classList.add('active');
}, 2000);
完成以上JS代码,我们就实现了“JS实现无缝轮播图”的完整攻略。
示例演示
以下提供两个JS实现无缝轮播图
的完整示例,可供参考。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现无缝轮播图 - Python技术站