Jquery中的基本2图像幻灯片

时间:2013-05-20 15:03:26

标签: javascript jquery

我正在尝试创建一个基本的jquery 2图像幻灯片。我不希望图像相互淡化,它们应该只是简单地改变每一秒。 在我下面的jquery代码中,代码包括淡入淡出。什么是没有褪色的正确代码?

<div id="manwrapper">
    <div>
        <img src="images/index-man.png" width="500" height="788" alt="SS Image" />
    </div>
    <div>
        <img src="images/index-man2.png" width="500" height="788" alt="SS Image" />
    </div>
</div>
<!--end manwrapper-->

CSS

#container #manwrapper {
    float: right;
    margin-top: -280px;
    z-index: 3;
    position:relative;
    width:500px;
    height:788px;
}
#container #manwrapper > div {
    position:absolute;
}

的JavaScript

setInterval(function () {
    $('#manwrapper > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#manwrapper');
}, 3000);

2 个答案:

答案 0 :(得分:2)

试试这个......

setInterval(function() { 
  $('#manwrapper > div:first')
    .hide(1000)
    .next()
    .show(1000)
    .end()
    .appendTo('#manwrapper');
},  3000);

答案 1 :(得分:1)

删除'fadeOut(1000).fadeIn(1000)

Demo