基于JavaScript实现简单的轮播图

2023年6月11日上午12:24 • JavaScript

下面就是基于JavaScript实现简单的轮播图的完整攻略：

1. 轮播图是什么？

轮播图指的是在网页上展示多张图片的方式之一。通常会设置一个区域，在该区域内依次展示不同的图片，经过一定的时间后，自动切换到下一张图片，循环往复。轮播图常用于网站的banner、产品展示等方面，能够吸引用户的眼球，提高网站的用户视觉体验。

2. 实现轮播图的原理

实现轮播图的关键在于控制图片的显示和切换。可以通过JavaScript实现定时器，每隔一定的时间，切换到下一张图片，并更新显示区域的内容。具体实现方式有很多种，下面是一种简单的示例方法。

3. 实现轮播图的步骤

3.1 准备图片资源

首先需要准备需要展示的图片资源，可以选择本地图片或者网络图片。本示例中我们选择了两张图片作为示例。

3.2 制作HTML结构

制作轮播图的HTML结构，需要包含轮播图的显示区域和控制按钮等元素。本示例中的HTML结构如下：

<div id="banner">
  <ul>
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
  </ul>
  <div id="btns">
    <span class="active"></span>
    <span></span>
  </div>
</div>

在该HTML结构中，我们使用了一个div元素作为轮播图的显示区域，其中的ul列表包含了需要轮播的两张图片，控制按钮使用了两个span元素，其中active类表示当前展示图片的控制按钮。

3.3 使用CSS样式美化轮播图

为了让轮播图更美观，我们需要添加一些CSS样式。具体的样式代码可以自行编写，本示例中使用了以下样式：

#banner {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

#banner ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
}

#banner ul li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#banner ul li img {
  display: block;
  width: 100%;
  height: 100%;
}

#banner #btns {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);
}

#banner #btns span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  cursor: pointer;
  background-color: #fff;
  opacity: 0.6;
}

#banner #btns span.active {
  opacity: 1;
}

3.4 编写JavaScript代码实现轮播图

最后一步就是编写JavaScript代码实现轮播图的切换。本示例使用了原生JavaScript方式实现，代码如下：

var banner = document.getElementById('banner');
var imgs = banner.getElementsByTagName('img');
var btns = banner.getElementsByTagName('span');
var len = imgs.length;
var currentIndex = 0;
var lastIndex = 0;
var interval = 4000;

// 自动切换轮播图
setInterval(function () {
  // 上一张图片隐藏
  imgs[lastIndex].style.opacity = 0;

  // 当前图片显示
  imgs[currentIndex].style.opacity = 1;

  // 更新控制按钮
  btns[lastIndex].classList.remove('active');
  btns[currentIndex].classList.add('active');

  // 更新索引值
  lastIndex = currentIndex;
  currentIndex++;

  if (currentIndex > len - 1) {
    currentIndex = 0;
  }
}, interval);

// 给控制按钮添加鼠标移入事件
for (var i = 0; i < len; i++) {
  (function (i) {
    btns[i].onmouseenter = function () {
      currentIndex = i;
    };
  })(i);
}

在该JavaScript代码中，我们使用了setInterval函数实现轮播图的自动切换。同时还给控制按钮添加了鼠标移入事件，当用户在控制按钮上悬停时，轮播图立即切换到对应的图片。