如何让我的图像使用 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);
});

编辑：在“检查”时也收到此错误消息 - 无法加载资源：net::ERR_FILE_NOT_FOUND

Answer 1

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

其次：隐藏img元素display: none

编辑：抱歉，抱歉，忽略有关 id 的内容。你们都是上帝；）

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