如何创建jQuery。每个fadeOut和fadeIn“；滑块“；？_Jquery

如何创建jQuery。每个fadeOut和fadeIn“；滑块“；？

jquery

如何创建jQuery。每个fadeOut和fadeIn“；滑块“；？,jquery,Jquery,我觉得我是厚颜无耻的，只是用做了一个“滑块”。每个在这里：客户端希望获得类似于原始flash动画的效果：如何使下一幅图像（如何使用此处的索引？）淡入代码如下： <style> ul.list { list-style-type: none; } html, body { height: 100%; } .content { margin:0 auto; position: relative; top:50%; height:841px; margin-top:-420px

我觉得我是厚颜无耻的，只是用

做了一个“滑块”。每个
在这里：
客户端希望获得类似于原始flash动画的效果：
如何使下一幅图像（如何使用此处的索引？）淡入
代码如下：
<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> 


保险单{
列表样式类型：无；
}
html，正文{
身高：100%；
}
.内容{
保证金：0自动；
位置：相对位置；
最高：50%；
高度：841px；
利润上限：-420px；
宽度：1190px；
溢出：隐藏；
}






$（窗口）。加载（函数（）{
函数fade（）{
$（'ul.list li'）。每个（功能（i）{
如果（i您可以轻松创建此效果
1.
使用不同的z索引将所有图像置于绝对位置
2.
FadeOut（）逐个显示所有图像，直到最后一个

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"/>

jQuery
$(document).ready(function() {
    function fade(){
        $('.imageFade').each(function( i ){
            if (i<3) {
                $(this).delay(i*5000).fadeOut(2000);
            }
        });
    }
    setTimeout(fade, 2000); 
});

$（文档）.ready（函数（）{
函数fade（）{
$（'.imageFade'）。每个（函数（i）{
如果（i我认为更好的方法是交换图像的setInterval
，如下所示：


你能用小提琴来复制吗？谢谢，这很酷。但是我能让它们淡入吗？好的，我明白了，你的意思是即将到来的照片的效果就像淡入一样？你做到了！谢谢！我在这条道路上，但没有遵循它。我采用这种方法来回答问题，因为你每一张都照了一遍，所以我可以停在最后一张照片上（而且我不必把每件事都重新写一遍；）.呸。我觉得第三次很有魅力。哈哈哈，我想是的。你做了我想做的事，但也打败了我，所以我坐在这里等你把事情做好。你基本上做到了！但是我怎么能在最后一张照片上停下来？@dollarvar检查我的最新编辑，带有最新的jsfiddle链接，这应该得到解决。非常棒的工作！哟谢谢，但正如我说的，我不想写任何新的东西。复制粘贴是个好主意，但我还是要看完你的代码，呵呵，我想了解我粘贴的内容。干杯！！
$(document).ready(function() {
    function fade(){
        $('.imageFade').each(function( i ){
            if (i<3) {
                $(this).delay(i*5000).fadeOut(2000);
            }
        });
    }
    setTimeout(fade, 2000); 
});

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