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

Question

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

非常感谢任何帮助。

这是 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让你开始。