当前位置：首页 > JavaScript

js实现逐个输出图片

2026-01-31 03:38:09JavaScript

使用JavaScript逐个输出图片

在JavaScript中，可以通过多种方式实现逐个输出图片的效果。以下是几种常见的方法：

方法一：使用setInterval定时器

通过设置定时器，每隔一段时间显示一张图片，隐藏其他图片。

const images = document.querySelectorAll('.image-container img');
let currentIndex = 0;

function showNextImage() {
    images.forEach(img => img.style.display = 'none');
    images[currentIndex].style.display = 'block';
    currentIndex = (currentIndex + 1) % images.length;
}

setInterval(showNextImage, 2000); // 每2秒切换一次

方法二：使用CSS动画和JavaScript控制

结合CSS的动画效果和JavaScript的控制逻辑，实现更平滑的切换。

const images = document.querySelectorAll('.image-container img');
let currentIndex = 0;

function showNextImage() {
    images.forEach(img => img.classList.remove('active'));
    images[currentIndex].classList.add('active');
    currentIndex = (currentIndex + 1) % images.length;
}

setInterval(showNextImage, 2000);

对应的CSS样式：

.image-container img {
    display: none;
    transition: opacity 0.5s ease;
}

.image-container img.active {
    display: block;
    opacity: 1;
}

方法三：使用requestAnimationFrame

对于需要更精细控制的动画效果，可以使用requestAnimationFrame。

const images = document.querySelectorAll('.image-container img');
let currentIndex = 0;
let lastTime = 0;

function showNextImage(timestamp) {
    if (timestamp - lastTime > 2000) {
        images.forEach(img => img.style.display = 'none');
        images[currentIndex].style.display = 'block';
        currentIndex = (currentIndex + 1) % images.length;
        lastTime = timestamp;
    }
    requestAnimationFrame(showNextImage);
}

requestAnimationFrame(showNextImage);

方法四：使用异步函数和Promise

通过异步函数和Promise实现更复杂的控制逻辑，例如等待图片加载完成后再显示。

const images = document.querySelectorAll('.image-container img');
let currentIndex = 0;

async function loadAndShowImages() {
    while (true) {
        await new Promise(resolve => setTimeout(resolve, 2000));
        images.forEach(img => img.style.display = 'none');
        images[currentIndex].style.display = 'block';
        currentIndex = (currentIndex + 1) % images.length;
    }
}

loadAndShowImages();

方法五：使用第三方库（如jQuery）

如果项目中已经使用了jQuery，可以简化代码实现。

let currentIndex = 0;
const images = $('.image-container img');

function showNextImage() {
    images.hide();
    images.eq(currentIndex).fadeIn();
    currentIndex = (currentIndex + 1) % images.length;
}

setInterval(showNextImage, 2000);