js原生代码实现轮播图的实例讲解

下面是“js原生代码实现轮播图的实例讲解”的攻略。

1. 轮播图的基本原理

轮播图的基本原理是利用定时器，按照一定的时间间隔切换图片。一般而言，轮播图有两种切换方式：

1. 水平方向的切换：即图片从左到右依次展示的切换方式。

2. 垂直方向的切换：即图片从上往下依次展示的切换方式。

2. 实现轮播图的思路

实现轮播图的基本思路如下：

1. 创建一个容器来包裹图片。

2. 在容器中插入多张图片。

3. 利用js设置定时器，定时切换图片。

4. 设置控制条，点击控制条可以切换到相应的图片。

3. 示例代码

这里提供两个示例代码：

示例1：水平切换

<!-- HTML代码 -->
<div id="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

/* CSS代码 */
#container {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#container img {
  width: 600px;
  height: 400px;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
}

/* 控制条样式 */
#controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#controls span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

#controls span.active {
  background-color: #f00;
}

// JS代码
var container = document.getElementById('container');
var imgs = document.getElementsByTagName('img');
var controls = document.getElementById('controls').getElementsByTagName('span');
var len = imgs.length;
var index = 0;

// 初始样式
imgs[0].style.display = 'block';
controls[0].className = 'active';

// 定时切换
var timer = setInterval(function() {
  imgs[index].style.display = 'none';
  controls[index].className = '';
  index++;
  if (index === len) {
    index = 0;
  }
  imgs[index].style.display = 'block';
  controls[index].className = 'active';
}, 2000);

// 点击控制条切换
for (var i = 0; i < len; i++) {
  controls[i].onclick = function() {
    clearInterval(timer);  // 清除定时器
    imgs[index].style.display = 'none';
    controls[index].className = '';
    index = this.getAttribute('data-index');
    imgs[index].style.display = 'block';
    controls[index].className = 'active';
    timer = setInterval(arguments.callee, 2000);  // 再次执行定时器
  };
}

示例2：垂直切换

<!-- HTML代码 -->
<div id="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

/* CSS代码 */
#container {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#container img {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

/* 控制条样式 */
#controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#controls span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

#controls span.active {
  background-color: #f00;
}

// JS代码
var container = document.getElementById('container');
var imgs = document.getElementsByTagName('img');
var controls = document.getElementById('controls').getElementsByTagName('span');
var len = imgs.length;
var index = 0;

// 初始样式
imgs[0].style.display = 'block';
controls[0].className = 'active';

// 定时切换
var timer = setInterval(function() {
  imgs[index].style.display = 'none';
  controls[index].className = '';
  index++;
  if (index === len) {
    index = 0;
  }
  imgs[index].style.display = 'block';
  controls[index].className = 'active';
}, 2000);

// 点击控制条切换
for (var i = 0; i < len; i++) {
  controls[i].onclick = function() {
    clearInterval(timer);  // 清除定时器
    imgs[index].style.display = 'none';
    controls[index].className = '';
    index = this.getAttribute('data-index');
    imgs[index].style.display = 'block';
    controls[index].className = 'active';
    timer = setInterval(arguments.callee, 2000);  // 再次执行定时器
  };
}

4. 总结

以上就是实现轮播图的详细攻略，分别提供了水平和垂直两种切换方式的示例代码。需要注意的是，这里提供的示例代码是比较简洁的，实际上在项目中还需要考虑多种兼容性、性能优化、交互效果等因素。