js 实现图片切换

图片切换的实现方法

在JavaScript中实现图片切换可以通过多种方式完成，以下是几种常见的方法：

使用HTML和JavaScript基础切换

HTML部分需要准备一个img标签和切换按钮：

<img id="myImage" src="image1.jpg" alt="Image">
<button onclick="changeImage()">切换图片</button>

JavaScript部分通过修改src属性实现切换：

let currentImage = 1;
const totalImages = 3;

function changeImage() {
    currentImage = currentImage % totalImages + 1;
    document.getElementById('myImage').src = `image${currentImage}.jpg`;
}

使用数组存储图片路径

对于更多图片的管理，可以使用数组存储路径：

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let index = 0;

function changeImage() {
    index = (index + 1) % images.length;
    document.getElementById('myImage').src = images[index];
}

自动轮播实现

添加定时器可以实现自动轮播效果：

let interval = setInterval(changeImage, 2000);

// 鼠标悬停暂停轮播
document.getElementById('myImage').addEventListener('mouseover', () => {
    clearInterval(interval);
});

// 鼠标离开恢复轮播
document.getElementById('myImage').addEventListener('mouseout', () => {
    interval = setInterval(changeImage, 2000);
});

添加过渡动画效果

通过CSS添加淡入淡出效果：

#myImage {
    transition: opacity 0.5s ease-in-out;
}

JavaScript中修改透明度实现平滑过渡：

function changeImage() {
    const img = document.getElementById('myImage');
    img.style.opacity = 0;

    setTimeout(() => {
        index = (index + 1) % images.length;
        img.src = images[index];
        img.style.opacity = 1;
    }, 500);
}

使用第三方库

对于更复杂的效果，可以考虑使用第三方库如Swiper.js：

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg"></div>
        <div class="swiper-slide"><img src="image2.jpg"></div>
        <div class="swiper-slide"><img src="image3.jpg"></div>
    </div>
    <!-- 添加分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 添加导航按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    const mySwiper = new Swiper('.swiper-container', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    });
</script>

以上方法提供了从基础到高级的图片切换实现方案，可以根据项目需求选择适合的方式。