本文实例讲述了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> <A>left</A> <DIV> <DIV> <div> <div> <ul > <li><img src="https://www.jb51.net/__PUBLIC__/images/demo/01.jpg" mce_src="https://www.jb51.net/__PUBLIC__/images/demo/01.jpg"></li> <li><img src="https://www.jb51.net/__PUBLIC__/images/demo/02.jpg" mce_src="https://www.jb51.net/__PUBLIC__/images/demo/02.jpg"></li> <li><img src="https://www.jb51.net/__PUBLIC__/images/demo/03.jpg" mce_src="https://www.jb51.net/__PUBLIC__/images/demo/03.jpg"></li> <li><img src="https://www.jb51.net/__PUBLIC__/images/demo/04.jpg" mce_src="https://www.jb51.net/__PUBLIC__/images/demo/04.jpg"></li> </ul> </div> </div> </DIV> </DIV> <A>right</A> </div>
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章: