原生js实现图片轮播

原生JavaScript实现图片轮播主要涉及HTML结构、CSS样式和JavaScript逻辑。以下是一个简单的图片轮播实现示例：

基础概念

图片轮播是一种常见的网页设计元素，用于在网页上自动或手动切换显示多张图片。它通常包括以下部分：

HTML结构：用于放置图片和控制按钮。
CSS样式：用于美化轮播效果和布局。
JavaScript逻辑：用于控制图片的切换和动画效果。

优势

用户体验：动态展示内容，吸引用户注意力。
节省空间：在有限的空间内展示多张图片。
灵活性：可以根据需求自定义样式和功能。

类型

自动轮播：图片按照设定的时间间隔自动切换。
手动轮播：用户通过点击按钮或滑动来切换图片。
无限循环：图片在到达最后一张后会回到第一张，形成循环。

应用场景

首页广告展示
产品介绍页面
新闻动态展示

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner">
            <img src="image1.jpg" alt="Image 1" class="active">
            <img src="image2.jpg" alt="Image 2">
            <img src="image3.jpg" alt="Image 3">
        </div>
        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.carousel {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel-inner img {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-inner img.active {
    opacity: 1;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.carousel-control.prev {
    left: 0;
}

.carousel-control.next {
    right: 0;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const carouselInner = document.querySelector('.carousel-inner');
    const images = document.querySelectorAll('.carousel-inner img');
    const prevButton = document.querySelector('.carousel-control.prev');
    const nextButton = document.querySelector('.carousel-control.next');
    let currentIndex = 0;

    function showImage(index) {
        images.forEach((img, i) => {
            img.classList.remove('active');
        });
        images[index].classList.add('active');
    }

    function nextImage() {
        currentIndex = (currentIndex + 1) % images.length;
        showImage(currentIndex);
    }

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

    prevButton.addEventListener('click', prevImage);
    nextButton.addEventListener('click', nextImage);

    // 自动轮播
    setInterval(nextImage, 3000);
});