JavaScript实现图片动画遇屏幕闪烁与尺寸调整问题求助

1. fadeIn()无效的原因及修复 #

你当前代码存在两个核心问题：一是新插入的图片默认处于显示状态，fadeIn()仅对隐藏元素生效；二是setInterval的100ms间隔远短于fadeIn的1000ms时长，动画未完成就被新图片覆盖，自然看不到效果。

修复后的代码：

// 初始将容器设为隐藏状态
document.getElementById("animation-slider").style.display = "none";

setInterval(function animationslider() {
    const container = document.getElementById("animation-slider");
    // 先淡出当前内容，完成后再替换图片
    $(container).fadeOut(200, function() {
        const index = number.next().value;
        container.innerHTML = `<img src="../../../static/my_project/logos/media/slides_banner_f/slide_${index}.jpg" />`;
        // 淡入新内容
        $(container).fadeIn(800);
    });
}, 1000); // 间隔与动画总时长匹配，避免队列堆积

注意：将setInterval间隔调整为和动画总时长（淡出+淡入）接近，防止动画冲突。

2. 图片闪烁问题：预加载所有图片 #

逐个加载图片是闪烁的核心原因，预加载可让所有图片提前缓存到浏览器，播放时直接读取本地资源。

实现预加载的代码：

const totalImages = 27; // 对应你的1-27号图片
const preloadedImages = [];

// 预加载函数
function preloadImages() {
    for(let i=1; i<=totalImages; i++) {
        const img = new Image();
        img.src = `../../../static/my_project/logos/media/slides_banner_f/slide_${i}.jpg`;
        preloadedImages.push(img);
    }
}

// 页面加载完成后启动预加载，加载完成再开始动画
window.addEventListener('load', function() {
    preloadImages();
    // 等待所有图片加载完成（可选，更稳妥）
    Promise.all(preloadedImages.map(img => new Promise(resolve => img.onload = resolve)))
        .then(() => {
            startAnimation();
        });
});

function startAnimation() {
    const container = document.getElementById("animation-slider");
    container.style.display = "none";
    const number = indexGenerator();
    
    setInterval(function() {
        $(container).fadeOut(200, function() {
            const index = number.next().value;
            // 直接使用预加载的图片对象
            container.innerHTML = '';
            container.appendChild(preloadedImages[index-1].cloneNode());
            $(container).fadeIn(800);
        });
    }, 1000);
}

// 修复生成器函数（原代码if为赋值操作，存在逻辑错误）
function* indexGenerator() {
    let index = 1;
    while (true) {
        yield index++;
        if (index > 27) index = 1;
    }
};

3. 尺寸偏移问题：用CSS固定容器尺寸 #

给动画容器设置固定宽高（与图片尺寸一致），避免替换图片时容器尺寸波动：

#animation-slider {
    width: 800px; /* 替换为你的图片实际宽度 */
    height: 400px; /* 替换为你的图片实际高度 */
    overflow: hidden; /* 防止图片超出容器 */
    display: none; /* 初始隐藏，配合淡入动画 */
}

#animation-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

4. 替代方案：纯JS实现淡入淡出（无需jQuery） #

如果不想依赖jQuery，可使用原生JS实现动画效果：

function fadeOut(element, duration) {
    let opacity = 1;
    const interval = 16; // 对应60fps帧率
    const step = opacity / (duration / interval);
    
    const timer = setInterval(() => {
        opacity -= step;
        element.style.opacity = opacity;
        if(opacity <= 0) {
            clearInterval(timer);
            element.style.display = 'none';
        }
    }, interval);
}

function fadeIn(element, duration) {
    element.style.opacity = 0;
    element.style.display = 'block';
    let opacity = 0;
    const interval = 16;
    const step = 1 / (duration / interval);
    
    const timer = setInterval(() => {
        opacity += step;
        element.style.opacity = opacity;
        if(opacity >= 1) {
            clearInterval(timer);
        }
    }, interval);
}

// 动画中替换jQuery的fadeOut/fadeIn：
// fadeOut(container, 200);
// 替换图片后调用fadeIn(container, 800);

内容的提问来源于stack exchange，提问作者Paweł Pedryc