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

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