JQuery implements the left and right moving focus chart, and jquery implements the focus chart.

JQuery implements the left and right moving focus chart, and jquery implements the focus chart.

This example describes the left-right moving focus chart 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

<div class="salebox">  <A class="left" id="pic_left">left</A>  <DIV class="pcont" id="ISL_Cont_1">    <DIV class="ScrCont">      <div class="flowbox" style="width:150px; height:60px; overflow:hidden;float:left;">        <div class="flow" style="width:150px;height:60px;">          <ul >           <li></li>           <li></li>           <li></li>           <li></li>          </ul>        </div>      </div>    </DIV>   </DIV>  <A class="right" id="pic_right">right</A></div>