用面向对象的方法写个轮播图 不敢说很用心 但是值得一看!

<!-- <script src="js/index.js"></script> -->
<!-- <script src="js/index2.js"></script> -->
<script src="js/index3.js"></script>

<script>
    // 使用Swiper对象
    var swiper = new Swiper({})
</script>

// 使用ES6中的class封装Swiper对象。 class Swiper { constructor(options) { // 轮播的容器 this.box = options.box || document.querySelector(".slider-box"); // 按钮：前一张 this.prev = options.prev || document.querySelector('.prev'); // 按钮：后一张 this.next = options.next || document.querySelector('.next'); // 获取所有的分页 this.pages = options.pages || document.querySelectorAll('.dot'); // 获取所有的图片 this.images = options.images || document.querySelectorAll('.images a'); // 定义一个索引 this.index = options.index || 0;

    // 下一张业务逻辑
    this.next.onclick = this.nextClick.bind(this);

    // 前一张业务逻辑  bind()是纠正this的方式。
    this.prev.onclick = this.prevClick.bind(this);

    // 点击页码轮播图片
    this.pages.forEach(function (page, i) {
        page.onclick = this.pageClick.bind(this)
    }.bind(this));

    // 轮播的定义器
    this.timer = setInterval(function () {
        this.next.click();// 调用next元素的click事件。
    }.bind(this), 3000);

    // 鼠标进入box元素时，停止轮播
    this.box.onmouseover = function () {
        clearInterval(this.timer);
    }.bind(this);

    // 鼠标离开box元素时，重启轮播
    this.box.onmouseout = function () {
        this.timer = setInterval(function () {
            this.next.click();
        }.bind(this), 3000);
    }.bind(this);
}

// 根据索引显示一张图片
showImage(idx) {
    // 纠正this的另外方式：把this临时存储一下。目的，让forEach()中的回调函数中的this指向that
    var that = this;
    this.images.forEach(function (image, i) {
        if (i === idx) {
            image.classList.remove('active');
            image.classList.add('active');
            that.pages[i].classList.remove('active');
            that.pages[i].classList.add('active');
        } else {
            image.classList.remove('active');
            that.pages[i].classList.remove('active');
        }
    })
}

nextClick() {
    // 判断索引是否是第一张
    if (this.index === this.images.length - 1) {
        this.index = 0;
    } else {
        this.index = this.index + 1;
    }
    this.showImage(this.index);
}

prevClick() {
    // 判断索引是否是第一张
    if (this.index === 0) {
        this.index = this.images.length - 1;
    } else {
        this.index = this.index - 1;
    }
    this.showImage(this.index);
}

pageClick() {
    this.showImage(i);
    this.index = i;
}

}
CSS样式

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}

.slider-box {
width: 1226px;
margin: 10px auto;
height: 460px;
overflow: hidden;
position: relative;
}

.slider-box .images a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 460px;
/* display: none; */
opacity: 0;
transition: all 1.5s;
}

.slider-box .images a.active{
/* display: block; */
opacity: 1;
}

.slider-box .images a img {
display: block;
width: 100%;
height: 100%;
}

.slider-box .navs {
position: absolute;
left: 0;
top: 195px;
width: 100%;
padding: 0 10px;
}

.slider-box .navs a {
background-image: url(…/img/icons.png);
background-repeat: no-repeat;
display: inline-block;
width: 41px;
height: 69px;
}

.slider-box .navs .prev {
background-position: -84px 0;
float: left;
}

.slider-box .navs .prev:hover {
background-position: 0 0;
}

.slider-box .navs .next {
background-position: -125px 0;
float: right;
}

.slider-box .navs .next:hover {
background-position: -43px 0;
}

.slider-box .pages {
position: absolute;
right: 20px;
bottom: 25px;
font-size: 0;
}

.slider-box .pages .dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid hsla(0, 0%, 100%, .3);
background-color: rgba(0, 0, 0, .4);
margin-right: 10px;
}

.slider-box .pages .dot:hover {
border: 1px solid rgba(0, 0, 0, .4);
background-color: hsla(0, 0%, 100%, .3);
}

.slider-box .pages .dot.active{
border: 1px solid rgba(0, 0, 0, .4);
background-color: hsla(0, 0%, 100%, .3);
}