JS图片轮播|极客笔记

JS图片轮播

在网页设计中，图片轮播是一个常见的功能，能够让页面更加动态和吸引人。使用JavaScript可以很方便地实现图片轮播的功能，下面将详细介绍如何使用JavaScript来实现一个简单的图片轮播效果。

实现思路

实现图片轮播的基本思路是通过控制图片的显示和隐藏来实现图片的切换。我们可以通过JavaScript来控制图片轮播的逻辑，具体步骤如下：

创建包含图片的容器，用来展示轮播的图片。
设置一个定时器，定时切换图片。
定义一个函数，用来切换图片。
给页面中的按钮添加事件监听器，实现手动切换图片的功能。

HTML结构

首先我们需要在HTML中创建轮播图片的容器和切换按钮：

<div class="slideshow">
    <img src="image1.jpg" class="slide">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
    <button id="prevBtn">上一张</button>
    <button id="nextBtn">下一张</button>
</div>

在上面的代码中，我们创建了一个包含三张图片和两个切换按钮的轮播容器。每张图片都有一个类名为slide，方便我们在JavaScript中选择和控制。

CSS样式

接下来我们给轮播容器和图片添加一些基本的样式，使其能够显示在页面中：

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

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

.slide.active {
    display: block;
}

在上面的代码中，我们定义了轮播容器.slideshow的样式，以及每张图片.slide的样式。我们将每张图片的display属性设置为none，只显示当前活动图片的display属性为block。

JavaScript逻辑

接下来我们使用JavaScript来控制图片的切换逻辑。首先我们需要获取轮播容器和图片：

const slideshow = document.querySelector('.slideshow');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;

slides[currentIndex].classList.add('active');

function showSlide(index) {
    slides.forEach((slide) => {
        slide.classList.remove('active');
    });

    slides[index].classList.add('active');
    currentIndex = index;
}

function nextSlide() {
    let nextIndex = currentIndex + 1;
    if (nextIndex >= slides.length) {
        nextIndex = 0;
    }
    showSlide(nextIndex);
}

function prevSlide() {
    let prevIndex = currentIndex - 1;
    if (prevIndex < 0) {
        prevIndex = slides.length - 1;
    }
    showSlide(prevIndex);
}

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

setInterval(nextSlide, 2000);

在上面的代码中，我们首先获取了轮播容器和图片，并设置了初始的currentIndex为0。然后我们定义了showSlide函数用来显示当前活动的图片，以及nextSlide和prevSlide函数用来切换到下一张或上一张图片。最后我们给切换按钮添加了事件监听器，并通过setInterval方法来定时切换图片。