0

我以为我很厚颜无耻，只是用.each.

它在这里： http: //liebdich.biz/。

客户想要的效果就像这里的原始 Flash 动画一样：http: //blanc-encens.com/。

我怎样才能让下一张图像（如何在这里使用索引？）淡入？

这里的代码：

<style>
ul.list {
list-style-type: none;
}

html, body {
height: 100%;
}

.content {
margin:0 auto;
position: relative;
top:50%;
height:841px;
margin-top:-420px;
width:1190px;
overflow: hidden;
}

</style>  
</head>

<body>
<div class="content">
<ul class="list">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
</div>

<script>
$(window).load(function() {

function fade(){
$('ul.list li').each(function( i ){
    if (i<3) {
        $(this).delay(i*5000).fadeOut(2000);
    }
});
}

setTimeout(fade, 5000); 

});
</script>
</body>
4

2 回答 2

1

我认为更好的方法是setInterval交换图像，如下所示：

http://jsfiddle.net/gdDFe/

function swap () {
    var $list = $('ul.list');
    var $next = $('li.active', $list).next('li');

    if (!$next.length) {
        clearInterval(interval);
        return;
    }

    $('li.active', $list).removeClass('active').fadeOut(2000);
    $next.addClass('active').fadeIn(2000);


}

$('ul.list li:first').addClass('active').fadeIn(500);
var interval = setInterval(swap, 5000);

ul.list {
    list-style-type: none;
    position:relative;
}

ul.list li {
    display:none;
    position:absolute;
    top:0;
    left:0;
}
于 2013-10-17T18:24:58.103 回答
1

您可以轻松创建此效果。

1.将所有图像放在具有不同 z-index 的绝对位置

2.FadeOut() 所有图像一张一张直到最后一张

http://jsfiddle.net/gvVaT/1/

HTML

<img class="imageFade" style="z-index:4" src="http://liebdich.biz/blanc/1.jpg"/>
<img class="imageFade" style="z-index:3" src="http://liebdich.biz/blanc/2.jpg"/>
<img class="imageFade" style="z-index:2" src="http://liebdich.biz/blanc/3.jpg"/>
<img class="imageFade" style="z-index:1" src="http://liebdich.biz/blanc/4.jpg"/>

CSS

.imageFade{
    width:500px;
    height:500px;
    position:absolute;
}

jQuery

$(document).ready(function() {
    function fade(){
        $('.imageFade').each(function( i ){
            if (i<3) {
                $(this).delay(i*5000).fadeOut(2000);
            }
        });
    }
    setTimeout(fade, 2000); 
});
于 2013-10-17T18:16:20.547 回答