JavaScript实现简单的轮播图效果

下面是详细讲解“JavaScript实现简单的轮播图效果”的完整攻略。

准备工作

在编写轮播图之前，你需要准备以下工作：

1. HTML 结构：需要一个 HTML 结构，用于展示轮播图，一般是 <ul> 元素下有若干个 <li> 元素，每个 <li> 元素中包含一个轮播图的内容，例如图片或文字。
2. CSS 样式：需要给 HTML 结构添加一些样式，如设置 <ul> 元素样式为 display: flex; 就可以实现轮播图的横向滚动效果。
3. JavaScript 操作：需要利用 JavaScript 实现轮播图的自动播放和手动切换功能。

实现自动播放功能

实现自动播放功能需要用到 JavaScript 的定时器 setInterval 函数，代码如下：

var index = 0; // 当前展示的图片索引
var timer = setInterval(function () {
  index++;
  // 判断是否超过图片数量，超过则回到第一张图片
  if (index >= images.length) {
    index = 0;
  }
  // 切换展示的图片
  switchImage(index);
}, 3000);

// 切换展示的图片
function switchImage(index) {
  // 设置当前展示的图片样式为 display: none; 隐藏
  images[currentIndex].style.display = 'none';
  // 设置要展示的图片样式为 display: block; 显示
  images[index].style.display = 'block';
  // 更新当前展示的索引
  currentIndex = index;
}

上述代码中，我们先定义了一个 index 变量，用于记录当前展示的图片索引，然后使用 setInterval 函数每隔 3 秒执行一次自动切换图片的操作。在自动切换图片的操作中，我们把 index 自增 1，并判断是否超过图片数量，如果超过则回到第一张图片。然后再调用 switchImage 函数切换展示的图片，将当前展示的图片隐藏，要展示的图片显示。

实现手动切换功能

实现手动切换功能需要使用 JavaScript 的事件监听函数 addEventListener 函数，代码如下：

// 获取左右切换按钮
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');

// 添加点击事件监听器
prevBtn.addEventListener('click', function () {
  index--;
  if (index < 0) {
    index = images.length - 1;
  }
  switchImage(index);
});

nextBtn.addEventListener('click', function () {
  index++;
  if (index >= images.length) {
    index = 0;
  }
  switchImage(index);
});

上述代码中，我们先通过 querySelector 方法获取 HTML 中定义的切换按钮元素，并利用 addEventListener 函数为其添加 click 事件监听器，当用户点击按钮时就会执行其中的回调函数。在回调函数中，我们根据当前的索引值 index 增加或减少 1，再判断是否超出图片数量，最后调用 switchImage 函数切换展示的图片。

示例说明

下面给出两个简单的轮播图示例：

示例一

HTML 结构代码：

<div class="slider">
  <ul class="images">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
  </ul>
  <button class="prev">上一张</button>
  <button class="next">下一张</button>
</div>

CSS 样式代码：

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.images {
  display: flex;
  width: 300%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: left 1s;
}

.images li {
  flex-shrink: 0;
  width: 33.333333%;
  height: 100%;
}

.prev {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.next {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

JavaScript 代码：

var images = document.querySelectorAll('.images li');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var index = 0;

prevBtn.addEventListener('click', function () {
  index--;
  if (index < 0) {
    index = images.length - 1;
  }
  switchImage(index);
});

nextBtn.addEventListener('click', function () {
  index++;
  if (index >= images.length) {
    index = 0;
  }
  switchImage(index);
});

setInterval(function () {
  index++;
  if (index >= images.length) {
    index = 0;
  }
  switchImage(index);
}, 3000);

function switchImage(index) {
  images.forEach(function (item) {
    item.style.transform = `translateX(${-index * 33.3333}%)`;
  });
}

示例二

HTML 结构代码：

<div class="slider">
  <ul class="images">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
  </ul>
</div>

CSS 样式代码：

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.images {
  width: 100%;
  height: 100%;
  position: relative;
}

.images li {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.images li:first-child {
  display: block;
}

.images li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

JavaScript 代码：

var images = document.querySelectorAll('.images li');
var index = 0;

setInterval(function () {
  index++;
  if (index >= images.length) {
    index = 0;
  }
  switchImage(index);
}, 3000);

function switchImage(index) {
  for (var i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
  }
  images[index].style.display = 'block';
}

以上就是实现简单的轮播图效果的详细攻略和两个示例说明。