js实现轮播图的两种方式(构造函数、面向对象)

下面是详细讲解js实现轮播图的两种方式的完整攻略。

构造函数实现轮播图

步骤1：HTML结构

首先需要有一个HTML结构，用于放置轮播图的图片及导航按钮，示例如下：

<div class="slider">
  <ul>
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
  <ol>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ol>
</div>

其中，ul标签中的li标签是轮播图的图片，可以根据需要添加、删除；ol标签中的li标签是导航按钮，用于切换轮播图。

步骤2：CSS样式

通过CSS样式设置轮播图的显示效果、过渡效果以及导航按钮的样式。示例如下：

.slider {
  width: 500px;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.slider ul {
  width: 1500px;
  height: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
}

.slider ul li {
  width: 500px;
  height: 250px;
  float: left;
}

.slider ol {
  position: absolute;
  right: 10px;
  bottom: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slider ol li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ccc;
  margin: 5px;
  float: left;
  cursor: pointer;
}

.slider ol li.active {
  background: #f00;
}

步骤3：JavaScript代码

通过JavaScript代码实现轮播图的自动播放、导航按钮切换以及手动切换等功能。示例如下：

function Slider(selector) {
  this.slider = document.querySelector(selector);
  this.sliderUl = this.slider.querySelector('ul');
  this.sliderLis = this.sliderUl.querySelectorAll('li');
  this.sliderOl = this.slider.querySelector('ol');
  this.sliderOls = this.sliderOl.querySelectorAll('li');
  this.len = this.sliderLis.length;
  this.index = 0;

  // 自动播放
  this.timer = setInterval(() => {
    this.index++;
    if (this.index >= this.len) {
      this.index = 0;
    }
    this.change();
  }, 2000);

  // 鼠标移入暂停播放
  this.slider.addEventListener('mouseenter', () => {
    clearInterval(this.timer);
  });

  // 鼠标移出继续播放
  this.slider.addEventListener('mouseleave', () => {
    this.timer = setInterval(() => {
      this.index++;
      if (this.index >= this.len) {
        this.index = 0;
      }
      this.change();
    }, 2000);
  });

  // 点击导航按钮切换
  for (let i = 0; i < this.len; i++) {
    this.sliderOls[i].addEventListener('click', () => {
      this.index = i;
      this.change();
    });
  }
}

Slider.prototype.change = function() {
  for (let i = 0; i < this.len; i++) {
    this.sliderOls[i].className = '';
    this.sliderLis[i].style.opacity = 0;
    this.sliderLis[i].style.zIndex = 0;
  }
  this.sliderOls[this.index].className = 'active';
  this.sliderLis[this.index].style.opacity = 1;
  this.sliderLis[this.index].style.zIndex = 1;
};

实例化轮播图对象并调用：

new Slider('.slider');

面向对象实现轮播图

步骤1：HTML结构

同样需要有一个HTML结构用于放置轮播图的图片及导航按钮，与构造函数方式相同。

步骤2：CSS样式

同样需要通过CSS样式设置轮播图的显示效果，与构造函数方式相同。

步骤3：JavaScript代码

通过面向对象的方式实现轮播图的自动播放、导航按钮切换以及手动切换等功能。示例如下：

function Slider(selector) {
  this.slider = document.querySelector(selector);
  this.sliderUl = this.slider.querySelector('ul');
  this.sliderLis = this.sliderUl.querySelectorAll('li');
  this.sliderOl = this.slider.querySelector('ol');
  this.sliderOls = this.sliderOl.querySelectorAll('li');
  this.len = this.sliderLis.length;
  this.index = 0;
  this.timer = null;
}

Slider.prototype.init = function() {
  this.autoPlay();
  this.mouseEvent();
  this.buttonEvent();
};

Slider.prototype.autoPlay = function() {
  this.timer = setInterval(() => {
    this.index++;
    if (this.index >= this.len) {
      this.index = 0;
    }
    this.change();
  }, 2000);
};

Slider.prototype.mouseEvent = function() {
  this.slider.addEventListener('mouseenter', () => {
    clearInterval(this.timer);
  });
  this.slider.addEventListener('mouseleave', () => {
    this.autoPlay();
  });
};

Slider.prototype.buttonEvent = function() {
  for (let i = 0; i < this.len; i++) {
    this.sliderOls[i].addEventListener('click', () => {
      this.index = i;
      this.change();
    });
  }
};

Slider.prototype.change = function() {
  for (let i = 0; i < this.len; i++) {
    this.sliderOls[i].className = '';
    this.sliderLis[i].style.opacity = 0;
    this.sliderLis[i].style.zIndex = 0;
  }
  this.sliderOls[this.index].className = 'active';
  this.sliderLis[this.index].style.opacity = 1;
  this.sliderLis[this.index].style.zIndex = 1;
};

// 实例化轮播图对象并调用
const slider = new Slider('.slider');
slider.init();

这种方式相对于构造函数方式来说，代码更加面向对象，可扩展性更强。