感謝您提前查看此問題。jQuery - div淡入/淡出 - 帶背景和內容 - 時間
作爲一個jQuery初學者,我正在試圖結合2個腳本來創建一個更流暢的結果..並且它不太好。
問題發生在內容div淡入和淡出在不同時間的背景。大約3次改變後,週期可以開始重疊。我已經嘗試了所有我能想到的計時組合,所以我認爲也許唯一真正的解決方案是組合腳本。第二個問題是內容更改沒有淡入淡出。因此,如果我在不同背景下將內容div設置爲100%x100%,平滑效果就會丟失。
最終目標:擁有不同背景和內容的Content Div每7-8秒順利更換一次。
目前,這是我所:
SCRIPT
<script type="text/javascript">
//Preload images first
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
var images = Array("http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG", "http://upload.wikimedia.org/wikipedia/commons/8/81/Sky_over_Washington_Monument.JPG", "http://pplus.in.ua/uploads/posts/2014-10/1414742119_pasmur_1.jpg");
$([images[0],images[1],images[2]).preload();
// Usage:
var currimg = 0;
$(document).ready(function(){
function loadimg(){
$('#background').animate({ opacity: 1 }, 500,function(){
//finished animating, minifade out and fade new back in
$('#background').animate({ opacity: 0.7 }, 500,function(){
currimg++;
if(currimg > images.length-1){
currimg=0;
}
var newimage = images[currimg];
//swap out bg src
$('#background').css("background-image", "url("+newimage+")");
//animate fully back in
$('#background').animate({ opacity: 1 }, 500,function(){
//set timer for next
setTimeout(loadimg,7500);
});
});
});
}
setTimeout(loadimg,9000);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var divs = $('div[id^="content"]').hide(),
i = 0;
function cycle() {
$("#displayArea").html(divs.eq(i).html());
i = ++i % divs.length; // increment i, and reset to 0 when it equals divs.length
}
setInterval(cycle, 9000);
});
</script>
CSS
#background {
position : fixed ;
bottom : 0 ;
left : 0 ;
z-index : -100 ;
background-image : url("http://fc02.deviantart.net/fs17/f/2007/153/1/4/Sky_Stock_1_by_PartWish.jpg");
width: 100%;
min-height: 100%;
background-position: 50% 20%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.index-caption {
position : absolute ;
left : 50% ;
top : 372px ;
display : block ;
padding : 18px ;
border : none ;
line-height : 1.3em ;
z-index : 1 ;
color : #fff ;
background : rgb(11, 43, 63) ;
text-transform : uppercase ;
font-size : 26px ;
margin-left : -470px;
}
HTML
<div id="background">
</div>
<div id="displayArea">
<div class="index-caption">
Content 1
</div>
</div>
<div id="contentA">
<div class="index-caption">
Content 2
</div>
</div>
<div id="contentB">
<div class="index-caption">
Content 3
</div>
</div>
<div id="contentC">
<div class="index-caption">
Content 4
</div>
</div>
<div id="contentD">
<div class="index-caption">
Content 5
</div>
</div>
正如你可以想象它非常混亂,但希望你能看到我想要去的地方。
任何幫助將不勝感激。
完整記錄,但具體到你遇到的問題是:循環不啓動?表現不佳?等等 – 2014-12-07 13:42:43
@Bonatoc謝謝。問題在於內容div在不同時間淡入和淡出背景。大約3次改變後,週期可以開始重疊。我已經嘗試了所有我能想到的計時組合,所以我認爲也許唯一真正的解決方案是組合腳本。第二個問題是內容更改沒有淡入淡出。因此,如果我在不同背景下將內容div設置爲100%x100%,平滑效果就會丟失。 – Lozano 2014-12-07 13:44:54
你在說「soundbites」。我沒有看到與觸發這些文件相關的任何代碼......音頻文件是否重疊? – 2014-12-07 13:46:48