本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
