掌握动态 Slider，增强交互式网页体验

前端

2024-01-13 02:44:07

引言

在上一篇博文中，我们剖析了静态 Slider 的运作原理。虽然静态 Slider 能够满足基本的需求，但它们无法提供丰富的交互体验。因此，本文将带领您踏上动态 Slider 的征程，解锁交互式网页的无限可能。

JavaScript 的魔力

JavaScript 是动态 Slider 的关键所在。它赋予了 HTML 元素生命，使其能够响应用户的交互。借助 JavaScript，我们可以控制 Slider 的自动轮播、响应按钮点击和滑动事件。

HTML 结构

动态 Slider 的 HTML 结构与静态 Slider 类似。它由包含轮播图片的容器、控制器和翻页按钮组成。但是，这一次，我们将使用 JavaScript 来操纵这些元素。

创建动态 Slider

创建容器： 定义一个包含轮播图片的 div 容器。
初始化 JavaScript： 创建一个 JavaScript 函数，负责 Slider 的逻辑。
自动轮播： 使用 setInterval() 函数设置定时器，自动轮播图片。
控制按钮： 为控制器和翻页按钮添加事件监听器，响应用户的交互。
滑动事件： 添加触摸或鼠标事件监听器，以响应用户在 Slider 上的滑动。

实例代码

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<div class="controls">
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');
let index = 0;

function autoSlide() {
  index++;
  if (index >= images.length) index = 0;
  slider.style.transform = `translateX(${-index * 100}%)`;
}

const interval = setInterval(autoSlide, 3000);

document.querySelector('.prev').addEventListener('click', () => {
  clearInterval(interval);
  index--;
  if (index < 0) index = images.length - 1;
  slider.style.transform = `translateX(${-index * 100}%)`;
});

document.querySelector('.next').addEventListener('click', () => {
  clearInterval(interval);
  index++;
  if (index >= images.length) index = 0;
  slider.style.transform = `translateX(${-index * 100}%)`;
});