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

Working Slider FIDDLE:

<强> JQUERY：

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

使用jquery在滑块中显示图像

1 个答案: