I have a background image on a container on all pages of a site, but the home page has two images and they would like these images to scroll/fade.
I have used the answer from this post here: CSS background-image slideshow and produced the following:
<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;">
The image paths are correct when looking at the source but unfortuately nothing is happening and the images aren't loading.
What could I be doing wrong?
Thanks in advance.
i think you're looking for this:
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();
( demo )
the problem with the fadeIn
function is that you can't fade in 1 element 2 times. once it's already visible, you need to reset the opacity to allow a second fade-in.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.