如何使用 jQuery 让我的图像淡入淡出

Question

我是编码新手，正在（非常）缓慢地尽最大努力学习 jQuery。在学习了一些基本命令后，我想我会尝试从头开始制作图像滑块，但我无法让我的第一张图像淡入。

任何帮助将不胜感激。

这是HTML:

<div class="wrapper">
    <div id="slider">
        <img id="img1" src="img/img1.jpg" />
        <img id="img2" src="img/img2.jpg" />
        <img id="img3" src="img/img3.jpg" />
    </div>
    <a href="#" class="left">Previous</a>
    <a href="#" class="right">Next</a>
</div>

这是CSS:

#slider {
  width: 350px;
  height: 450px;
  overflow: hidden;
}

这是jQuery:

sliderInt=1;
sliderNext=2;

$(document).ready(function(){
    $("#slider > #img1").fadeIn(400);
});

编辑：我也在 'inspecting' 时收到此错误消息 - 加载资源失败：net::ERR_FILE_NOT_FOUND

Answer 1

~~首先：使用唯一 ID 或 class 而不是 ID。 ID 必须是唯一的。~~

其次：隐藏img个元素display: none

编辑：抱歉，抱歉，请忽略有关 ID 的内容。你们都是上帝 ;)

编辑：如果您需要有关箭头的帮助，这里有一个基本的 fiddle 可以帮助您入门。

如何使用 jQuery 让我的图像淡入淡出

How do I get my image to fade in using jQuery

html

css

jquery

slider