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

【问题标题】：fadein and fadeout animation for every background image每个背景图像的淡入淡出动画
【发布时间】：2014-02-08 11:21:10
【问题描述】：

这是 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()">

【问题讨论】：

jquery fadeIn 和fadeOut 效果基于“元素”而不是“图像”。也许你应该淡出元素，改变背景图像，然后淡出它们？
所以你说我应该将 bg 图像加载到两个 div 并更改 div 的不透明度？
也许这会有所帮助stackoverflow.com/questions/8610973/…
如何将我的脚本加载到 div 中？

标签： javascript arrays image-processing fadein fadeout

【解决方案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.

【讨论】：