html - JavaScript - Looping image gallery does loop correctly -

html - JavaScript - Looping image gallery does loop correctly -

i trying create image gallery in html, css. , utilize javascript animate transition. i've managed working, decided wanted loop within when reached lastly image (4th) loop - transition first, , carry on sequence until got end again.

download @ site thought of problem - https://drive.google.com/folderview?id=0b8hdvq3ozfi6mg5gltbfwgnmzku&usp=sharing

i've tried many ways of doing this, i've got loop fine. entire code:

var imagenum = 0; var currentimg = 1; var maxwidth = 0; $(document).ready(function() { var div1 = $("#ip").offset().top; var div3 = $("#flash").offset().top; $(window).scroll(function() { if($(window).scrolltop() < div3) { $("#ip").fadein(400); } else if($(window).scrolltop() > div3) { $("#ip").fadeout(400); }}); }); $(document).ready(function() { $( '.g-li' ).each(function() { imagenum++; maxwidth += 830; }); $( '.g-ul' ).css('width' , maxwidth + 'px'); $( '.rightbtn-inner' ).click(function(){ moveleft(); }); $( '.leftbtn-inner' ).click(function(){ moveright(); }); timer(); loop(); }); function moveleft() { if( currentimg < imagenum ) { $( '.g-ul' ).animate( {'marginleft' : '-=820px' } , 1000 , 'swing' ); currentimg = currentimg + 1; } } function moveright() { if( currentimg > 1 ) { $( '.g-ul' ).animate( {'marginleft' : '+=820px' } , 1000 , 'swing' ); currentimg = currentimg - 1; } } function timer() { setinterval(moveleft, 10000); } function loop() { if( currentimg = imagenum ) { setinterval(loopbk, 10000); currentimg = 1; // did reset here } function loopbk() { $( '.g-ul' ).animate( {'marginleft' : '+=2460px' } , 1000 , 'swing' ); /* currentimg = 1; // , tried reset here */ } }

to create carry on sequence normal have reset variable currentimg 1 work. if currenting = 1 in function loop() goes lastly image , carries on until looping back.

or if place reset in function loopbk(), loops until 2nd image , proceeds loop resulting in going left far.

can play around , help me eyes should work, doesn't - , i've been trying solve long time.

thank can help.

andy.

javascript html css image-gallery