淡入淡出div的背景圖像，以及其中的文字

Question

使用jQuery，我想循環播放3個不同的背景圖像和3個「box」內的文本，每隔6秒消失一次。

CSS：

.box { 
background: url(/filepath/to/image.jpg) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

HTML：

<div class="box"> 
<h1>Headline</h1> 
<h2>Sub-text</h2> 
</div> 

什麼是做到這一點的最好方法是什麼？

Answer 1

使用jQuery函數setInterval（）持續6秒的時間間隔。 Fadding 3元之間的影響和迭代是再容易實現......

var loop = 1; 
var id = setInterval(function() { 

if(loop === 3) 
{ 
    loop = 1; //reset loop back 
    //clearInterval(id); cancel interval 
} 
alert(" loop: "+loop); 
//TODO: fadding + changing text here maybe in separate function... 

loop++; 

}, 6000); 

Answer 2

井最好方式是相當主觀的，但你可以使用setInterval並設置有不同的BG圖像3個樣式規則和文本。你可能想要預先安裝iamges。

.boxy { 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.box1 { 
    background-image: url(/filepath/to/image1.jpg); 
    opacity: .8; 
} 
/* other boxes omitted for brevity */ 

然後，你可以做一個類似於：

var boxen = [3, 1, 2]; 
setInterval(function() { 
    boxen.push(boxen.shift()); 
    $(".box").removeClass(boxen.map(function (elem) { return "box" + elem; }) 
     .addClass("box" + boxen[0]); 
}, 6000); 

Answer 3

我想你應該考慮使用一些jQuery的滑塊插件，例如像 Awkward Showcase或jQuery cycle

Answer 4

你可以不褪色在相同元素的背景圖像之間。我的建議是插入三個（或多個你想要的）圖像，絕對彼此重疊，然後在這些圖像之間淡出。

您也可以對要淡入的文本元素執行相同的操作，也可以構建一系列包含兩者的任意組合的div。

實際上，您可以採用幾乎無限數量的方法來實現所描述的效果，但試圖淡化背景圖像並不是其中之一。

<div class="box"> 
    <div class="slide bg1"> 
     <!-- content --> 
    </div> 
    <div class="slide bg2"> 
     <!-- content --> 
    </div> 
    <div class="slide bg3"> 
     <!-- content --> 
    </div> 
</div> <!-- END .box --> 

風格...

.box { 
    position: relative; /* Set to relative to keep the containing .slide divs, ahem, relative */ 
} 
.slide { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.bg1 { /* There are more elegant ways of targeting the individual slides, I'm just being lazy... */ 
    background-image: src('/dir/img.jpg'); 
} 
.bg2{} 
.bg3{} /* Etc, etc... */ 

衰落孩子的div不僅讓您更改背景圖片的外觀，但其他任何你可能想淡出（或其它東西對於這個問題）。

至於javascript，有一千個和一個資源在那裏，涵蓋了這一切，所以我會推遲給他們（谷歌！）。