es6 滚动条轮播图

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() //添加显示样式
            }
        }

参考博客 透明度轮播图