JQuery-implemented left-right moving focus chart effect _ jquery

This article mainly introduces the effects of jQuery's left-right moving focus graph, and involves some tips on jQuery's combination of time functions to respond to mouse events and dynamically operate on page element styles, if you need it, refer to the example in this article to describe the left and right moving focus graph implemented by jQuery. We will share this with you for your reference. The details are as follows:

Jquery section:

$(function () {  var _speed = 1000;  var _len = 0;  var _size = 150;  var _direction = 'left';  function mar(){    if(_direction == 'left'){      if(_len >= 450){       _direction = 'right';      }else{       $(".flow ul").animate({"margin-left":"-=" + _size + "px"});       _len += _size;      }    }else{      if(_len <= 0){       _direction = 'left';      }else{       $(".flow ul").animate({"margin-left":"+=" + _size + "px"});       _len -= _size;      }    }  }  var _go = setInterval(mar,_speed);  $("#pic_left").click(function (){   _direction = 'left';  });  $("#pic_right").click(function (){   _direction = 'right';  });  $(".flow li").mouseover(function (){    clearInterval(_go);  }).mouseout(function (){    _go = setInterval(mar,_speed);  });});

Html section

  left            
        
          
 
 
           
  
  
           
  
  
           
  
  
           
  
  
          
 
 
        
      
         right