向背景圖片轉換添加淡入淡出

看來我在這裏找到的所有東西都提出了比它可能需要更復雜的東西。向背景圖片轉換添加淡入淡出

我基本上只是希望這個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

向背景圖片轉換添加淡入淡出

回答

相關問題