2

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

我基本上只是想让这个在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 );  
});
4

2 回答 2

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>
于 2013-02-15T06:55:06.377 回答
0

还有另一种方法可以使用 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，将其设置为隐藏，并执行淡入动画，动画完成后，将顶部图像放置在底部 divplayer-bottom中，以便下次放置时准备好顶部的新图像并再次执行相同的任务。

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);

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

#player > div.img00 { background-image: url("http://dummyimage.com/400x300/440/ffffff&text=Image+01"); }
#player > div.img01 { background-image: url("http://dummyimage.com/400x300/404/ffffff&text=Image+02"); }
...
于 2013-02-15T04:57:57.990 回答