首页图片切换脚本中jQuery fadeIn效果无法实现的求助

原代码的核心问题 #

• $(this)在setInterval回调里指向的是全局window对象，不是目标图片元素，所以fadeIn方法根本没作用到图片上。
• 直接修改src是瞬间切换，没有过渡动画的时间差，自然看不到淡入效果。

方案1：单图片元素实现淡入淡出切换 #

这种方式通过“淡出→换图→淡入”的流程实现平滑过渡，代码修改如下：

var images = ["image-link1", "image-link2"];
$(function () {
    var $homeImage = $("#homeImage"); // 缓存jQuery对象，减少DOM查询
    var i = 0;
    $homeImage.attr("src", images[i]);

    setInterval(function () {
        i = (i + 1) % images.length; // 简化循环逻辑，自动回到数组开头
        // 先淡出当前图片，完成后切换src再淡入新图
        $homeImage.fadeOut("slow", function() {
            $(this).attr("src", images[i]).fadeIn("slow");
        });
    }, 3000);
});

同时给图片加基础CSS避免布局问题：

#homeImage {
    display: block;
}

方案2：交叉淡入（更流畅的效果） #

如果要实现旧图淡出同时新图淡入的真正交叉效果，需要用两个层叠的图片元素：

HTML（ASP.NET MVC视图中） #

<div class="image-container">
    <img id="img1" class="home-image" src="image-link1" alt="首页图片">
    <img id="img2" class="home-image" src="" alt="首页图片" style="display: none;">
</div>

CSS #

.image-container {
    position: relative;
    width: 你的图片宽度;
    height: 你的图片高度;
}
.home-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，避免拉伸 */
}

JavaScript #

var images = ["image-link1", "image-link2"];
$(function () {
    var $img1 = $("#img1");
    var $img2 = $("#img2");
    var currentIndex = 0;
    var isImg1Active = true; // 标记当前显示的图片

    setInterval(function () {
        currentIndex = (currentIndex + 1) % images.length;
        if (isImg1Active) {
            $img1.fadeOut("slow");
            $img2.attr("src", images[currentIndex]).fadeIn("slow");
        } else {
            $img2.fadeOut("slow");
            $img1.attr("src", images[currentIndex]).fadeIn("slow");
        }
        isImg1Active = !isImg1Active;
    }, 3000);
});

补充说明 #

• fadeIn完全适合做这种过渡效果，配合fadeOut就能实现平滑切换，交叉淡入的视觉效果会比单元素切换更自然。
• 缓存jQuery对象可以提升代码性能，避免每次定时器触发都去查询DOM。

内容的提问来源于stack exchange，提问作者meow92