Question

我是javascript的新手，我试图在照片幻灯片放映中使用淡出/淡入淡出我试图使用我见过的其他地方的代码但是它似乎没有工作可以有人看看而且只是指出我可能会出错的地方。

HTML

<div id="media" >
    <img src="test1.jpg" />
    <img src="test2.jpg"/>
    <img src="test3.jpg" />
</div>

CSS

#media
{
    border-style:groove;
    border-width:5px;
    border-color:green;
    background-color:purple;
    height:34%;
    width:30%;
    margin-top:40px;
    margin-right:5%;
    margin-bottom:50px;
    margin-left:5%;
    float:left;
}
 #media img
{
    width:100%;
    height:100%;
}

脚本

     $('#media img:gt(0)').hide();
        setInterval(function () {
            $('#media :first-child').fadeOut(4000)
                                 .next('img')
                         .fadeIn(10)
                         .end()
                         .appendTo('#media');
        }, 4000); // 4 seconds
    </script>

任何帮助都会很棒。

谢谢你的帮助。

Answer 1

使用jQuery可以实现这一目标。也许是这样的：

$(function() {
    var images = $(".images img").hide();
    var current = 0;
    setInterval(function() {
        var next = ((current + 1) % images.length);
        images.eq(current).fadeOut();
        images.eq(next).fadeIn();
        current = next;
    });
});

但是，在您的CSS页面中，您还想添加：

.images
{
    position: relative;
}
.images img
{
    display: none;
    position: absolute;
}

如果你想让一些人淡出其他人，这很好吗？

查看此页面，使用jQuery有一些非常相似的概念：http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

褪色图像简单的幻灯片javascript / html

1 个答案: