jQuery实现的左右移动焦点图效果

本文实例讲述了jQuery实现的左右移动焦点图效果。分享给大家供大家参考，具体如下：
jquery 部分：

$（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 部分

<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><img src="__PUBLIC__/images/demo/01.jpg" mce_src="__PUBLIC__/images/demo/01.jpg" width="150px" height="60px"></li> <li><img src="__PUBLIC__/images/demo/02.jpg" mce_src="__PUBLIC__/images/demo/02.jpg" width="150px" height="60px"></li> <li><img src="__PUBLIC__/images/demo/03.jpg" mce_src="__PUBLIC__/images/demo/03.jpg" width="150px" height="60px"></li> <li><img src="__PUBLIC__/images/demo/04.jpg" mce_src="__PUBLIC__/images/demo/04.jpg" width="150px" height="60px"></li></ul></div></div></DIV> </DIV><A class="right" id="pic_right">right</A></div>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。