Question

似乎我在这里找到的所有东西都提出了比它可能需要的更复杂的东西。

我基本上只想让它在changeBackground上淡出（“慢”）...
有任何易于实施的建议吗？

jQuery( function( $ ) {
    var images = [ "bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg" ];
    var currentImage = 0;

    function changeBackground() {
        $( '#home' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }

    setInterval( changeBackground, 2600 );  
});

Answer 1

这是一个简化版本（包装器，幻灯片）与包装器，幻灯片，幻灯片方法：

代码：

<script>
var images = [ "bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg" ];
var cur_image = 0;

function changeBackground() {

    cur_image++;

    if ( cur_image >= images.length )
        cur_image = 0;

    // change images
    $( '#container' ).css({
        backgroundImage: 'url(' + images[ cur_image ] + ')'
    });

    $( '#container .slide' ).fadeOut( 'slow', function(){
        $( this ).css({
            backgroundImage: 'url(' + images[ cur_image ] + ')'
        }).show();
    } );

}

setInterval( changeBackground, 2600 );
</script>

以下是示例标记：

<div id="container">
    <div class="slide"></div>
    <div class="content">
        <p>This is example content.</p>
        <p>This is more content.</p>
    </div>
</div>
<style type="text/css">
#container { height: 768px; width: 1024px; background: url(bg2.jpg); }
#container .slide { height: 768px; width: 1024px; position: absolute; }
#container .content { position: absolute; top: 40px; left: 40px; padding: 1em; background: rgba(255,255,255,.5); }
</style>

Answer 2

还有另一种方法可以使用jQuery执行此操作，并且仍然可以轻松实现，请看这个小提琴：http://jsfiddle.net/WRMfU/

这个想法是将图像播放器放在里面有两个div，一个在另一个上面，如下所示：

<div id="player">
    <div id="player-top"></div>
    <div id="player-bottom" class="img00"></div>
</div>

使用jQuery，您将图像放在顶部div player-top，将其设置为隐藏，并执行fadeIn动画，在动画完成后，将顶部图像放在底部div {{1} }，所以它会在下次将新图像放在顶部并再次执行相同任务时准备就绪。

player-bottom

我正在使用CSS创建用于保存背景图像的类，因此在javascript中更容易处理...

var nImages = 3, currImage = 0;

function changePic(){
    var top = $("#player-top");
    currImage == nImages ? currImage = 0 : currImage++;
    top.hide().addClass("img0"+currImage).fadeIn(800, function(){
        $("#player-bottom").attr("class", top.attr("class"));
        top.attr("class", "");
    });
}

setInterval(changePic, 2000);

向背景图像过渡添加淡入淡出

2 个答案: