jquery - Add a "loop mode" to my slideshow -
i got simple horizontal slideshow (i've been working on while now) left/right buttons navigate it. doesn't have "continuous" play - returning begining or end when clicking respective buttons. here's jquery code:
var menuitem_place = 0; var menuitem_position = 0; var menuitem_limit = parseint($('.menuitem').length) - 1; $('.menuitem:first .content').css({margin: 0, height: '100%', lineheight: '99px'}) // rocks menu scroll left button mouse events $('#rocksmenu_btnleft').on('mouseenter', function(){ $(this).animate({'background-position-x':'-26px'}, 150); }); $('#rocksmenu_btnleft').on('mouseleave', function(){ $(this).stop(true).animate({'background-position-x':'-52px'}, 150); }); $('#rocksmenu_btnleft').on('click', function(){ $(this).animate({'background-position-x':'0px'}, 150, function(){ $(this).animate({'background-position-x':'-26px'}, 150); // slide items backward if (menuitem_place > 0){ menuitem_place --; } menu_animateclick(); } ); }); // rocks menu scroll right button mouse events $('#rocksmenu_btnright').on('mouseenter', function(){ $(this).animate({'background-position-x':'-26px'}, 150); }); $('#rocksmenu_btnright').on('mouseleave', function(){ $(this).stop(true).animate({'background-position-x':'0px'}, 150); }); $('#rocksmenu_btnright').on('click', function(){ $(this).animate({'background-position-x':'-52px'}, 150, function(){ $(this).animate({'background-position-x':'-26px'}, 150); // slide items forward if (menuitem_place < menuitem_limit){ menuitem_place ++; } menu_animateclick(); } ); }); function menu_animateclick() { menuitem_position = 0 - (menuitem_place * 200); $('#menucontainer').stop().animate({left: menuitem_position + 'px'}, 300); }
i'd add feature code - fiddle
thanx.
pedro
i added else statement each incremetation , decrementation of menuitem_place.
if(menuitem_place > 0) menuitem_place --; else menuitem_place =3;
and
if (menuitem_place < menuitem_limit){ menuitem_place ++; } else menuitem_place = 0;
Comments
Post a Comment