Question

以下是50秒后图像发生变化的脚本：

<script>
    var mutato;
    mutato=0;
    var kepek = new Array();
        kepek[0] = 'url("bg0.jpg")';
        kepek[1] = 'url("bg1.jpg")';
        kepek[2] = 'url("bg2.jpg")';
        kepek[3] = 'url("bg3.jpg")';
        kepek[4] = 'url("bg4.jpg")';
        kepek[5] = 'url("bg5.jpg")';
        kepek[6] = 'url("bg6.jpg")';
        kepek[7] = 'url("bg7.jpg")';
        kepek[8] = 'url("bg8.jpg")';
        kepek[9] = 'url("bg9.jpg")';
        kepek[10] = 'url("bg10.jpg")';
        kepek[11] = 'url("bg11.jpg")';
        kepek[12] = 'url("bg12.jpg")';
        kepek[13] = 'url("bg13.jpg")';
        kepek[14] = 'url("bg14.jpg")';

function kepcsere()
{


    document.getElementById("hatter").style.backgroundImage =kepek[mutato];
    mutato++;
    if (mutato>=kepek.length)
    {
        mutato=0;
    }

    t = setTimeout(function(){kepcsere()},50000);

}

但我希望每张图片都有淡入/淡出动画。

这是html：

<body id="hatter" onload="kepcsere()">

Answer 1

这是一个似乎对我来说非常好的解决方案：

将div元素放入正文中，如下所示：

<body>
    <div id="hatter" style="height:100%;">
    </div>
</body>

让你的javascript看起来像这样：

$(document).ready(function() {
    var mutato;
    mutato=0;
    var kepek = new Array();
    kepek[0] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/tower-bridge-100518.jpg")';
    kepek[1] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/millennium-bridge-100521.jpg")';
    kepek[2] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/ponte-vecchio-florence-1001037.jpg")';
    function kepcsere()
    {
        $('#hatter').animate({opacity: 0}, 'slow', function() {
            $(this).css({
                'background-image': kepek[mutato]
            }).animate({opacity: 1}, 'fast');
        });
        mutato++;
        if (mutato>=kepek.length)
        {
            mutato=0;
        }

        setTimeout(function(){kepcsere()},5000);
    }
    kepcsere();
});

这种方法的目标是1）淡出div，2）改变背景图像，3）淡化div。

如果您有任何疑问，请与我联系！

Here is the working Fiddle

每个背景图像的淡入淡出和淡出动画

1 个答案: