es6 滚动条轮播图
html结构
因为利用滚动条来实现轮播图,所以需要增加一个div来滚动,这里的图片需要浮动在一排显示,同时为了视觉上的效果需要复制一张图片插入到内容最后
<div class="wrap">
<div class="show">
<div class="content">
<img src="./images/1.png" alt="">
<img src="./images/2.png" alt="">
<img src="./images/6.png" alt="">
<img src="./images/4.png" alt="">
<img src="./images/5.png" alt="">
</div>
</div>
<p class="prev"></p>
<p class="next"></p>
<ul class="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
css样式
轮播图具体样式看个人喜好,但图片必须用绝对定位重叠在一起,在于图片其他样式以及上一张,下一张,图片序号可以自己定义,这里js代码中需要用到两个样式
.wrap .num .active {
background-color: lightseagreen;
}
active状态的样式也可以自己定义
调用方式
new Banner2({
img: ".show img",
number: ".num li",
prev: '.prev',
next: '.next',
show:'.show'
})
js代码
这里需要用到我封装的animate函数,csdn地址:animate函数
class Banner2 {
constructor(option) {
this.init(option) //初始化
}
init(option) {
this.imgAll = document.querySelectorAll(option.img);
this.numAll = document.querySelectorAll(option.number);
this.prev = document.querySelector(option.prev);
this.next = document.querySelector(option.next);
this.show = document.querySelector(option.show);
this.content = document.querySelector(".content");
this.numIndex = 0; //默认展示项
this.imgIndex = 0; //默认展示项
this.timer = null;
this.imgWidth = this.content.children[0].clientWidth
let newImg = this.content.children[0].cloneNode();
this.content.appendChild(newImg)
this.bindEvent();
this.auto()
}
auto() { //启动轮播,时间间隔3秒
this.timer = setInterval(() => {
this.moveNext()
}, 3000)
}
clearTimer() {
clearInterval(this.timer); //清除自动轮播定时器
}
initStyle() {
this.numAll[this.numIndex].className = ''; //默认样式
}
addStyle() { //显示样式
this.numAll[this.numIndex].className = 'active';
animate(this.imgAll[this.imgIndex], {
opacity: 1
});
}
bindEvent() {
if (this.prev) { //如果传了上一张按钮
this.prev.onclick = () => {
this.clearTimer() //清除定时器
this.moveNPrev(); //图片切换到上一张
this.auto() //启动轮播,时间间隔3秒
}
}
if (this.next) {
this.next.onclick = () => {
this.clearTimer()
this.moveNext(); //图片切换到下一张
this.auto() //启动轮播,时间间隔3秒
}
}
if (this.numAll) {
for (let i = 0, n = this.numAll.length; i < n; i++) {
this.numAll[i].onclick = () => {
this.clearTimer() //清除定时器
this.moveIndex(i) //跳转到指定图片
this.auto() //启动轮播,时间间隔3秒
}
};
}
}
moveIndex(newIndex) {
this.initStyle() //恢复上一张默认样式
this.imgIndex = newIndex;
animate(this.show, {
scrollLeft: this.imgIndex * this.imgWidth
})
this.numIndex = newIndex; //指定索引
this.addStyle() //添加显示样式
}
moveNext() {
this.initStyle() //恢复上一张默认样式
this.imgIndex++;
if (this.imgIndex >= this.imgAll.length) {
this.imgIndex = 1;
this.show.scrollLeft = 0
}
animate(this.show, {
scrollLeft: this.imgIndex * this.imgWidth
})
this.numIndex++;
if (this.numIndex >= this.numAll.length) {
this.numIndex = 0
}
this.addStyle() //添加显示样式
}
moveNPrev() {
this.initStyle() //恢复上一张默认样式
this.imgIndex++;
if (this.imgIndex >= this.imgAll.length) {
this.imgIndex = 1;
this.show.scrollLeft = 0
}
animate(this.show, {
scrollLeft: this.imgIndex * this.imgWidth
})
this.numIndex++;
if (this.numIndex >= this.numAll.length) {
this.numIndex = 0
}
this.addStyle() //添加显示样式
}
}
参考博客 透明度轮播图