Question

我使用一个简单的脚本每隔X秒更改一次网站的背景图片。我想要做的是结合某种淡入淡出动画或从一个图像到下一个图像的过渡。实现这一目标的最佳方法是什么？

我对Javascript不是很好，所以请耐心等待。：）

<script type="text/javascript">
    var images = ['bg1.png', 'bg2.png', 'bg3.png'];
    var curImage = 0;
    function switchImage()
    {
        curImage = (curImage + 1) % images.length
        document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
    }
    window.setInterval(switchImage, 5000);
</script>

我一遍又一遍地阅读并且不明白，所以请有人给我一个工作代码，这样我就可以复制并粘贴并摆脱这个烦人的工作。例如http://preferredmerchantservices.net/

Answer 1

似乎没有人使用老式的js脚本来实现这种动画。我建议你使用jQuery或其他javascript库，它们基本上是浏览器javascript功能的抽象层。

你也可以找到许多例子，插件等等，就像你提到的过渡效果一样。

过渡效果的插件：http://malsup.com/jquery/cycle/
jQuery网站，这很简单，花了几天时间让我学习它：http:///www.jquery.com

希望它有所帮助。

Answer 2

制作与图像尺寸相同的DIV
将您的图片设置为CSS背景
将第二个“前景”图像放在DIV中，不透明度为
淡入第二张图片
交换该图片 - ＆gt;使其成为DIV的CSS背景
将前景图像的不透明度设置为零
将前景图片换成下一张图片
重复

Answer 3

以防您需要为jQuery重写代码。这是：

<script type="text/javascript">
    var images = ['bg1.png', 'bg2.png', 'bg3.png'];
    var curImage = 0;
    var timer;
    function switchImage() {
        $('body').css({'backgroundImage':'url(images/' + images[curImage] + ')'};
        curImage == images.length? curImage = 0; curImage++;
        clearInterval(timer);
        timer = setInterval(switchImage, 5000);        
    }
    timer = setInterval(switchImage, 5000);        
</script>

但我想指出，这并不是淡入/淡出背景图像。为此，您可以使用容器作为背景图像。调整大小的东西也许会调整大小。

// Resize Handler
$(window).resize(function () {
    resizePages();
});

function resizePages() {

    var width = $(window).width();
    var height = $(window).height();

    $('.backgroundContainer').css({'width': width});

    /*
        .contentWrapper would be where all your page's content is placed
        .backgroundContainer is a class for a div placed out side teh contentWrapper
        It would have a lower z-index than .contentWrapper but higher than body.
    */


    /*
        This makes sure that the background image is the same height as 
        either the windows of the .contentWrapper (whichever is larger)
    */
    if (height > $('.contentWrapper').height()){
        $('.backgroundContainer').css({'height': height});
    } else {
        $('.backgroundContainer').css({'height': $('.contentWrapper').height()});
    }
}

然后，您可以调整开关代码以淡化转换之间的背景。

褪色背景图像

3 个答案: