Geek Answers Handbook

Slide show for background image div + jquery

I have a big div element in the title, and the div has a lot of text content and a few fields. and I have a big img like bg for this div, now I need to do a slide show for this div background: /

How to make slide show for background image div?

I researched a lot, but could not find anything: /

Thanks a lot! estimate!

+4
source share
5 answers

One way to do this is to create an array of background images:

var bgArr = ["img/bg1.jpg", "img/bg2.jpg"]; //and so on... function backgroundSlide(i) { $("#header").css("background-image", "url("+bgArr[i++]+")"); if (i == bgArr.length) i = 0; var st = setTimeout(arguments.callee(i), 1000); } backgroundSlide(0)

It will be a cycle and a cycle ...

+2
source

I was also looking for a css background slideshow, thanks for your input. I investigated your solution using the setTimeout method, however, I had serious problems with it (I am noob).

I adapted the peirix solution with the setInterval alternative and came up with this:

 var bgArr = ["images/TopImage-01.jpg", "images/TopImage-02.jpg", "images/TopImage-03.jpg" ]; var i=0; // Start the slide show var interval = self.setInterval("swapBkgnd()", 5000) function swapBkgnd() { if (i>(bgArr.length-1) ) { i=0 $("#header").css("background-image", "url("+bgArr[i]+")"); } else { $("#header").css("background-image", "url("+bgArr[i]+")"); } i++; };

Now I need to add a fade effect and an image preloader, and I'll leave. It would be interesting to know if there is a more accurate way to achieve this.

+2
source

To change the background image, you can use the following:

 $("#mydiv").css("background-image", "url(1.jpg)");

To create a slide show, call it at regular intervals using setimeout.

0
source

A couple of days before I searched for a similar explanation. Answer number two was pretty good, but as I see it, it needs a fading effect. I accomplished this (and much more). Here is the code:

 var bgArr = ['img1.png', 'img2.png', 'img3.png', 'img4.png']; var bgText = ['text1', 'text2', 'text3', 'text4']; var i=0; var left = 0; $(document).ready(function() { timer = setTimeout("changeBG()", 7000); $("#slider_left").on("click", function(){ i = i-2; if(i<-1) i = bgArr.length-2; left = 1; clearTimeout(timer); changeBG(); }); $("#slider_right").on("click", function(){ if(i>(bgArr.length-1)) i = 0; clearTimeout(timer); changeBG(); }); }); function changeBG() { i++; if(i>(bgArr.length-1)) i = 0; $('#slider_up').stop().fadeIn(1000, function(){ if(left == 1){ var a = i+1; if(i == bgArr.length-1) a = 0; }else{ var a = i-1; if(i == 0) a = bgArr.length-1; } left = 0; $("#slider_up").css("background", "url("+bgArr[a]+") no-repeat center center white"); $("#slider_up").css('opacity',0).show().animate({opacity:1}); $("#slider_down").css("background", "url("+bgArr[i]+") no-repeat center center white"); $("#slider_up").css('opacity',1).show().animate({opacity:0}); $(".text_holder").fadeOut(1000, function() { $(this).html(bgText[i]); $(this).fadeIn(500); }); }); timer = setTimeout("changeBG()", 7000); };

I explained this on my blog: http://blog.braovic.com/css-background-slider-and-slideshow/

Hope this helps all of you. Best, Ante.

0
source

This may help you - https://github.com/im4aLL/bose

 $("#header").bose({ images : [ "imagePath_1", "imagePath_2", "imagePath_3"] });

But the transition is only disappearing. Good luck

0
source

More articles:


All Articles