如何使用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);
});

编辑：我也会在检查＆＃39;时收到此错误消息。 - 无法加载资源：net :: ERR_FILE_NOT_FOUND

Answer 1

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

其次：隐藏img元素display: none

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

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