jquery - 使用 jquery 在滑块中显示图像

Question

我正在制作一个简单的 jquery 滑块。我的代码如下。请告诉我如何显示我在类滑块的 div 中插入的一些 id 的图像。我的 jquery 代码不起作用。

CSS代码：

.slider {
    width:800px;
    height:300px;
    overflow: hidden;
    margin: 30px auto;
    background-image: url(img/loader.gif);
    background-repeat: no-repeat;
    background-position: center;
}

.shadow {
    background-image: url(img/shadow.png);
    background-repeat: no-repeat;
    background-position: top;
    width: 1400px;
    height: 128px;
    margin: -55px auto;
}

.slider img {
    width: 800px;
    height: 300px;
    display: none;

}

jQuery代码

$(document).ready(function() {
    $('.slider #1').fadeIn(2000);   
});

html

<div class="slider"> 
    <img id="1" src="img/1.jpg" border="0" alt="Intro" /> 
    <img id="2" src="img/2.jpg" border="0" alt="Course" /> 
    <img id="3" src="img/3.jpg" border="0" alt="My Slider" /> 
</div>
<div class="shadow"></div>

Answer 1

工作滑块 FIDDLE：

查询：

$(function () {
    $('.slider img:gt(0)').hide();
    setInterval(function () {
        $('.slider :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.slider');
    },
    3000);
});