开发者

JavaScript slider code

开发者 https://www.devze.com 2023-03-10 04:52 出处:网络
I\'m making js-slider of div blocks. I have an arrows to the both sides. I want to scroll horizontally my slider when mouse is over. Before this I did everything using this code:

I'm making js-slider of div blocks. I have an arrows to the both sides. I want to scroll horizontally my slider when mouse is over. Before this I did everything using this code:

  jQuery('.control')
    .bind('click', function(){
        jQuery('#slideInner').animate({
          'marginLeft' : SlideWid开发者_高级运维th * SlideNumber
        });
  });

But what to do, if I want slide everything until mouse is over .control?


You should have a setInterval(...) to be delay-looping while element is hovered

var interval = null; // I use global var for this example - globals are discouraged in general
jQuery('.control')
    .hover(function(){
        interval = setInterval(function() { // start looping when mouse enters
            jQuery('#slideInner').animate({
               'marginLeft' : SlideWidth * SlideNumber
            });
        },
        1000); // this is how many milliseconds you want to wait between animations
     }, function(){
        clearInterval(interval); // stop looping when mouse is out
     });

Note: this is an oversimplification and requires further work (e.g. check for margin not to go out of bounds, etc), but it's intention is to show how setInterval(...) could be applied for your problem.

0

精彩评论

暂无评论...
验证码 换一张
取 消