JS 图片轮播和点击切换|极客笔记

JS 图片轮播和点击切换

在网页开发中，图片轮播和点击切换功能是非常常见的需求，通过 JavaScript 可以轻松实现这两个功能。本文将详细介绍如何使用 JavaScript 实现图片轮播和点击切换效果。

实现图片轮播

图片轮播是一种常见的网页设计元素，通常用于展示多张图片，通过自动轮播切换图片，让页面看起来更加动态和吸引人。

HTML 结构

首先，我们需要创建一个包含图片的容器，如下所示：

<div class="slider">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

CSS 样式

利用 CSS 样式将图片容器设置为相对定位，并设置每张图片的位置和显示效果：

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

.slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slider img.active {
    opacity: 1;
}

JavaScript 脚本

接下来，我们通过 JavaScript 脚本实现图片轮播的功能：

let images = document.querySelectorAll('.slider img');
let currentImage = 0;

function showImage(index) {
    images[currentImage].classList.remove('active');
    images[index].classList.add('active');
    currentImage = index;
}

function nextImage() {
    let nextIndex = (currentImage + 1) % images.length;
    showImage(nextIndex);
}

setInterval(nextImage, 3000);

在上面的 JavaScript 脚本中，我们首先通过 querySelectorAll 方法选择所有的图片元素，并定义一个变量 currentImage 来表示当前显示的图片索引。然后，定义了两个函数 showImage 和 nextImage，分别用来显示指定索引的图片和切换到下一张图片。最后，通过 setInterval 方法每隔 3 秒自动切换到下一张图片。

实现点击切换

除了自动轮播外，用户还可以通过点击按钮手动切换图片，这样可以增加用户的交互体验。

HTML 结构

我们可以在图片容器下方添加两个按钮，用于切换到上一张和下一张图片：

<div class="slider">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <button onclick="prevImage()">上一张</button>
    <button onclick="nextImage()">下一张</button>
</div>

JavaScript 脚本

为了实现点击切换功能，我们需要修改一下 JavaScript 脚本，添加两个函数 prevImage 和 nextImage，分别用来切换到上一张和下一张图片：

function prevImage() {
    let prevIndex = (currentImage - 1 + images.length) % images.length;
    showImage(prevIndex);
}

在上面的 JavaScript 脚本中，我们定义了一个新的函数 prevImage，用来切换到上一张图片。通过取余运算确保索引在合法范围内，实现循环切换的效果。

运行效果

最终的效果是用户可以通过点击按钮手动切换图片，或者等待自动轮播切换图片。整体页面看起来更加生动有趣，提升了用户的体验。

JS 图片轮播和点击切换