[英]Sliding/fading background-image
我在網站所有頁面上的容器上都有一個背景圖像,但是主頁上有兩個圖像,他們希望這些圖像滾動/淡入淡出。
我在這里使用了這篇文章的答案: CSS背景圖像幻燈片,並產生了以下內容:
<script>
var images=new Array('imageurl1','imageurl2');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.hometopcontentarea')
.css('background','url("'+images[nextimage++]+'") no-repeat center')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
</script>
<div class="hometopcontentarea col-xs-12 col-sm-12" style="height: 624px; margin-bottom: 20px;">
在查看源代碼時,圖像路徑是正確的,但不幸的是,什么也沒有發生,並且圖像沒有加載。
我可能做錯了什么?
提前致謝。
我認為您正在尋找:
var images = [
"http://www.independent.ie/incoming/article29989530.ece/ALTERNATES/h342/Li%20Ann%20Smal%20-App.jpg",
"http://im.rediff.com/news/2015/dec/24tpoty20.jpg"
]
var nextimage = 0;
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.hometopcontentarea')
.css({
background: 'url('+ images[nextimage++]+') no-repeat center',
opacity:0,
})
.fadeTo('slow',1);
setTimeout(doSlideshow,4000);
}
doSlideshow();
( 演示 )
fadeIn
函數的問題是您不能在1個元素中淡入2次。 一旦它已經可見,則需要重置不透明度以允許第二次淡入。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.