当前位置：首页 > JavaScript

js实现图片播放

2026-03-16 04:33:28JavaScript

使用HTML5的`<img>`标签和JavaScript控制

创建一个HTML文件，包含一个<img>标签用于显示图片，以及控制按钮。通过JavaScript动态更改src属性实现图片切换。

<!DOCTYPE html>
<html>
<head>
    <title>图片播放器</title>
</head>
<body>
    <img id="slideshow" src="image1.jpg" alt="Slideshow">
    <button onclick="prevImage()">上一张</button>
    <button onclick="nextImage()">下一张</button>

    <script>
        const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
        let currentIndex = 0;

        function updateImage() {
            document.getElementById("slideshow").src = images[currentIndex];
        }

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

        function prevImage() {
            currentIndex = (currentIndex - 1 + images.length) % images.length;
            updateImage();
        }
    </script>
</body>
</html>

自动轮播功能实现

添加定时器实现自动轮播，并增加暂停/播放控制按钮。

js实现图片播放

let intervalId;

function startSlideshow() {
    intervalId = setInterval(nextImage, 2000); // 每2秒切换一次
}

function stopSlideshow() {
    clearInterval(intervalId);
}

// 在页面加载时开始轮播
window.onload = startSlideshow;

使用CSS增强视觉效果

添加CSS过渡效果使图片切换更平滑。

#slideshow {
    width: 500px;
    height: 300px;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

.fade {
    opacity: 0;
}

修改JavaScript代码实现淡入淡出效果：

js实现图片播放

function updateImage() {
    const img = document.getElementById("slideshow");
    img.classList.add("fade");

    setTimeout(() => {
        img.src = images[currentIndex];
        img.classList.remove("fade");
    }, 500);
}

响应式图片播放器

使用百分比宽度和媒体查询确保播放器在不同设备上正常显示。

#slideshow {
    max-width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    #slideshow {
        width: 100%;
    }
}

预加载图片优化性能

在页面加载时预加载所有图片，避免切换时等待加载。

function preloadImages() {
    images.forEach(imgSrc => {
        const img = new Image();
        img.src = imgSrc;
    });
}

window.onload = function() {
    preloadImages();
    startSlideshow();
};