1

这是我的代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
#wrap{
    position:fixed;
    z-index:-1; 
    top:0; 
    left:0; 
    background-color:black
}
#wrap img.bgfade{
    position:absolute;
    top:0;
    display:none;
    width:100%;
    height:100%;
    z-index:-1
}
</style>
</head>

<body>
<div id="wrap">
<img class="bgfade" src="images/s1.png">
<img class="bgfade" src="images/s2.png">
<img class="bgfade" src="images/s3.png">
<img class="bgfade" src="images/s4.png">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
    $('img.bgfade').hide();
    var dg_H = $(window).height();
    var dg_W = $(window).width();
    $('#wrap').css({'height':dg_H,'width':dg_W});
    function anim() {
        $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(2000);
        $("#wrap img").first().fadeIn(1000);
            setTimeout(anim, 3000);
                            //setInterval(anim, 3000);
    }

    anim();
});
</script>
</body>
</html>

我想做烟雾动画，我有 4 张图像，4 张烟雾图像应该是淡入淡出但只有一次。在第四张图像淡出后，动画不应再次出现。我已从该站点http://demo.web3designs.com/jquery-animated-background-images-fade-in-out.htm获取此代码。请帮助我。

4

2 回答 2

1

不知道你想说什么但是..如果你想在加载函数中调用它然后只在那里调用它并删除 setTimeout （setTimeout如果你不需要再次调用它，我不知道你为什么要使用它）。

 $(window).load(function(){
   $('img.bgfade').hide();
   var dg_H = $(window).height();
   var dg_W = $(window).width();
  $('#wrap').css({'height':dg_H,'width':dg_W});

  anim();
});

 function anim() {
   $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
   $("#wrap img").first().fadeIn(1000);
 }
于 2013-09-27T07:09:19.530 回答
0

尝试

var $imgs = $("#wrap img");

function anim() {
    var $current = $imgs.filter('.current').removeClass('current'),
        $next = $current.next();
    $next = $next.length ? $next : $imgs.first();
    $next.addClass('current');

    $current.fadeOut(1500);
    $next.fadeIn(1000);
    if (!$imgs.last().is($next)) {
        setTimeout(anim, 3000);
    }
}
anim();
于 2013-09-27T07:14:00.953 回答