jquery bg transition loop

Question

I am looking to loop my backgrounds. It plays once, image 1 - 3 then stops once it transitions to the 3rd background image. I believe that the process continues in memory, however the bg does not repeat from the first image through the sequence (loop)

How can I reorganize this to function as intended it?

HTML

<div class="bg_spinner"></div>
<ul class="pagination">
    <li class="current"><a href="images/bg_img1.jpg">1</a></li>
    <li><a href="images/bg_img2.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

JS

$(window).load(function() {
    $('.spinner').fadeOut();
    $('body').css({overflow:'inherit'})
});
swfobject.registerObject("FlashID");

function nextbg(){ 
    $(".pagination .current").next().children("a").click();
}
setInterval(nextbg,14000);

..............................................................................

var fl;

$(document).ready(function() {

var w_img=2800, h_img=1700;
var w,new_w,h, new_h, num;
var h_cont=1000, h_cont_new=1000;
setWidth();
setHeight();
w=new_w;h=new_h;
setSize();
function setWidth(){
    new_w=$(window).width();
}
function setHeight(){
    new_h=$(window).height();
}
function setSize(){
    if ((w/w_img) > (h/h_img)) {
        w_img_new=w+20;
        h_img_new=~~((w+20)*h_img/w_img);
    } else {
        h_img_new=h+20; 
        w_img_new=~~((h+20)*w_img/h_img);
    }
    $('#bgSlider img').css({width:w_img_new, height:h_img_new});
    if (h>h_cont) {
        m_top=~~((h-h_cont)/2);
    } else m_top=0
    $('.box').stop().animate({paddingTop:m_top+20},1000, 'easeOutCirc');
    h_cont_new=h_cont
}
setInterval(setNew,1);
function setNew(){
    setWidth();
    setHeight();
    if (fl) {h_cont=800;} else {h_cont=1000;}
    if ((w!=new_w)||(h!=new_h)||(h_cont_new!=h_cont)) {
        w=new_w;h=new_h;
        setSize();
    }
}

})

Most such functions require that you keep track of which element you're on and return to the first one when you get to the last. I don't see that here. — isherwood
– isherwood, Commented Nov 19, 2013 at 19:58
I don't see any element with the class "spinner" for one... So maybe change bg_spinner to spinner? — Hanlet Escaño
– Hanlet Escaño, Commented Nov 19, 2013 at 19:59
Can you show the code for the click handler? I assume you add the current class in there. If so you just need to add the current to the first-child if next() does not exist — Huangism
– Huangism, Commented Nov 19, 2013 at 20:00
Appreciate the update to the question, but I don't see any click handlers for $(".pagination .current").next().children("a").click(); — Huangism
– Huangism, Commented Nov 19, 2013 at 21:31

isherwood · Accepted Answer · 2013-11-19 21:01:19Z

1

Most such functions require that you keep track of which element you're on and return to the first one when you get to the last. I don't see that here. It would look something like this:

var count;

function nextbg(){    
    if (count < $(".pagination li").length)
       $(".pagination li.current").next().children("a").click();
       count++;
    } else {
        $(".pagination li").first().children("a").click();
        count = 0;
    }    
}

edited Nov 19, 2013 at 21:01

answered Nov 19, 2013 at 20:01

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Huangism Over a year ago

Wouldn't your .current length return 1 at all times?

isherwood Over a year ago

Yeah. I was in a hurry. Updated.

Huangism Over a year ago

Wouldn't $(".pagination .current").length still return 1 at all times. I am assuming OP removes the .current from the current element and add it to the next in his click handler. But I guess it's hard to say without seeing OP's click handler

isherwood Over a year ago

Good call. Updated again. (I probably shouldn't be working on SO while working on other things. :-) )

Huangism Over a year ago

Well $(".pagination li").next() wouldn't work too well. I think that part you had it right with the current. Or use .eq() with count to determine the current. Either way it is hard to say without seeing the click handler.

|

Collectives™ on Stack Overflow

jquery bg transition loop

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related