向背景图片转换添加淡入淡出

看来我在这里找到的所有东西都提出了比它可能需要更复杂的东西。向背景图片转换添加淡入淡出

我基本上只是希望这个fadeIn（“慢”）上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); 
});

来源

2013-02-15 sotark

我从来没有找到解决方案。我总是在BG图像上创建一个淡入图像的功能，一旦它完全消失，请更改BG图像。然后将顶部图像设置为0的不透明度。对每次更改重复。我认为铬只支持背景图像转换。 – Leeish 2013-02-15 04:10:23

下面是一个简化版本（包装，幻灯片）相对于包装器，滑块，滑方法：

代码：

<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-15 06:55:06 theandystratton

还有另外一种方式使用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，将其设置为隐藏，并执行淡入动画，动画完成后，您将最上面的图片在底部DIV player-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-15 04:57:57

向背景图片转换添加淡入淡出

回答

相关问题