Question

我以为自己很厚颜，只用.each制作一个“滑块”。

客户想要效果，就像在原始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>

Answer 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); 
});

Answer 2

我认为更好的方法是交换图像的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;
}

我怎样才能制作一个jQuery。每个fadeOut和fadeIn“滑块”？

2 个答案: