與jQuery交叉淡化背景圖像

所以我有一些圖像，我想在後臺顯示它們作爲幻燈片。但是，我希望圖像在當前圖像和下一個圖像之間交叉淡入淡出。到目前爲止，我只能夠在圖像之間切換：與jQuery交叉淡化背景圖像

$(document).ready(function() { 

    var images = ["landing_background_1.jpg", "landing_background_2.jpg", "landing_background_3.jpg", "landing_background_4.jpg"]; 

    var currentImage = 0; 


    function changeBackgroundImage() { 


     $("html").fadeIn().css({ 

      "background-image": "url('img/backgrounds/" + images[++currentImage] + "')", 

     }); 


     if (currentImage >= images.length - 1) { 

      //set it back to the begining 
      currentImage -= images.length; 

     } 

    } 


    setInterval(changeBackgroundImage, 1500); 

});

任何幫助將不勝感激！ :)

來源

2013-08-20 Elmer

在JS中完成交叉淡入淡出需要兩個單獨可見的圖像，其中一個淡出，另一個淡入淡出。您不能像使用純JavaScript一樣切換單個圖像，而是嘗試執行交叉淡入淡出。你顯然可以用CSS3做到這一點。 – jfriend00

http://jqueryfordesigners.com/image-cross-fade-transition/ – eclipsis

你必須做的是將兩個元素疊加在一起。然後有一個淡出和另一個淡出。

這是我怎麼會去這樣做......

三網融合

#background-images { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    } 

#bImg1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 3; 
    background: url(starting-img1.jpg) no-repeat; 
    background-size: contain; 
    } 

#bImg2 { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    background: url(starting-img2.jpg) no-repeat; 
    background-size: contain; 
    } 

.container { 
    width: 960px; 
    height: 900px; 
    background: rgba(255,255,255,.7); 
    margin: auto; 
    position: relative; 
    z-index: 10; 
}

的HTML ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<html> 
<body> 
    <div id="background-images"> 
     <div id="bImg1"></div> 
     <div id="bImg2"></div> 
    </div> 
    <div class="container"> 
     Content Here 
    </div> 
</body> 
</html>

腳本...

var imageSet1 = ["image1.jpg", "image2.jpg", "image3.jpg"]; 
var currentImageSet1 = 0; 

var imageSet2 = ["image4.jpg", "image5.jpg", "image6.jpg"]; 
var currentImageSet2 = 0; 

function changeBackgroundImages() { 
    img1Fade(); 
    setTimeout(img2Fade, 2000); 

} 

function img1Fade(){ 

    $('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})}); 
    $('#bImg2').fadeIn('slow'); 
    if (currentImageSet1 >= imageSet1.length - 1) { 

      currentImageSet1 -= imageSet1.length; 
     }; 
} 

function img2Fade(){ 

    $('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})}); 
    $('#bImg1').fadeIn('slow'); 
    if (currentImageSet2 >= imageSet2.length - 1) { 

      currentImageSet2 -= imageSet2.length; 
     }; 
} 

$(document).ready(function(){ 

    setInterval(changeBackgroundImages, 5000); 
});

您將需要弄亂時間t讓它看起來不錯。確保將你的url設置爲圖像數組中的圖像，或者當css中的sting被構建時。

來源

2013-08-20 23:43:52

是的，但我不明白我如何可以像使用jQuery那樣定位背景圖像。 – Elmer

檢查更新的答案 –

我花了很多時間去尋找最簡潔最簡單的方法。這最後的工作原理：

var i=0; 
 
var imghead=[ 
 
\t "url(http://yoururl.com/picture0.jpg)", 
 
\t "url(http://yoururl.com/picture1.jpg)" 
 
\t ];//add as many images as you like 
 

 
function slideimg() { 
 
    setTimeout(function() { 
 
     jQuery('#element').css('background-image', imghead[i]); 
 
     i++; 
 
     if(i==imghead.length) i=0; 
 
     slideimg(); 
 
    }, 6000); 
 
} 
 
slideimg();

#element{ 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
\t opacity: 1.0; 
 
\t -webkit-transition: background-image 1.5s linear; 
 
\t -moz-transition: background-image 1.5s linear; 
 
\t -o-transition: background-image 1.5s linear; 
 
\t -ms-transition: background-image 1.5s linear; 
 
\t transition: background-image 1.5s linear; 
 
}

來源

2015-05-05 02:34:40 Lorenzo

這適用於基於Webkit的瀏覽器，但不是標準的; 'background-image'不是一個可動畫的屬性：https：//www.w3.org/TR/css-transitions-1/#animatable-properties – Grodriguez

更簡單：

var current = 1; 
function anim() { 
    if(current == 4) {current = 1; } 
    $('#bImg'+ current).fadeOut(3000); 
    ++current; 
    $('#bImg'+ current).fadeIn(3000); 
    setTimeout(anim, 8000); 
} 
anim();

HTML：

<div class="inside" > 
     <div id="bImg2"></div>  
     <div id="bImg3"></div>  
    </div>

CSS：

.inside { 
background:url(top_01.jpg) no-repeat center top ; 
} 


#bImg2 { 
position: absolute; 
top: 0px; 
width: 100%; 
background:url(top_02.jpg) no-repeat center top ; 
display: none; 
} 

    #bImg3 { 
position: absolute; 
top: 0px; 
width: 100%; 
background:url(top_03.jpg) no-repeat center top ; 
display: none; 
}

來源

2015-09-08 09:15:30

與jQuery交叉淡化背景圖像

回答

相關問題