编辑用于幻灯片放映的FadeIn / FadeOut

时间:2015-02-13 09:51:16

标签: html css

目前我的网站主页上有幻灯片(4张图片)作为我的背景。图像之间的过渡非常平滑,并且从照片跳到照片。如何创建更平滑的过渡,是否可以淡入和淡出?

所有帮助非常感谢,谢谢


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>    
        $(document).ready(function(){
        var header = $('body');

        var backgrounds = new Array(
            'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
          , 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
          , 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
          , 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
        );

        var current = 0;

        function nextBackground() {
            current++;
            current = current % backgrounds.length;
            header.css('background-image', backgrounds[current]);
        }
        setInterval(nextBackground, 5000);

        header.css('background-image', backgrounds[0]);
        });

        </script>

2 个答案:

答案 0 :(得分:1)

将您的JS更改为此以提高效率。如果你想要淡入淡出动画,最好创建一个覆盖整个身体的div。:

<强> HTML

<body>
   <div id="div1"></div>
</body>

<强> CSS

#div1
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right: 0;
}

<强>的Javascript

 $(document).ready(function(){

            var backgrounds = new Array(
                'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
              , 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
              , 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
              , 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
            );

            var current = 0;

            function nextBackground() {
                if(current<backgrounds.length)
                   current++;
                 else
                   current=0;
                 $('#div1').fadeOut(function() {
                   $('#div1').css({background : backgrounds[current]) });
                   $('#div1').fadeIn(5000);
                 }, 5000);
            }
            setInterval(nextBackground, 5000);
    });

答案 1 :(得分:1)

由于没有不透明状态,很难淡化背景图像。您可以使用-z-index div与正文相同的大小,并在其余内容后面将图像淡入其中,或者您可以在背景上浮动蒙版并在切换时将其倾斜为黑色(或其他颜色)图片。这是执行后者的简单方法:

HTML:

<div id = "mask"></div>

CSS

#mask {
    width:100%;
    height:100%;
    background:#000000;
    top:0;
    left:0;
    position:absolute;
    display:none;
}

jquery的

 $(document).ready(function(){
        var header = $('body');

        var backgrounds = new Array(
            'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
          , 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
          , 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
          , 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
        );

        var current = 0;

        function nextBackground() {
            $('#mask').fadeTo(1000, 0.9, function() {
            current++;
            current = current % backgrounds.length;
            header.css('background-image', backgrounds[current]);
            })
            $('#mask').fadeTo(500, 0);
        }
        setInterval(nextBackground, 5000);

        header.css('background-image', backgrounds[0]);
        });

你可以使用颜色,定时器和不透明度来获得你想要的效果。

FIDDLE