本文實例講述了jQuery焦點圖輪播效果實現(xiàn)方法。分享給大家供大家參考，具體如下：
前面一篇《JS實現(xiàn)焦點圖輪播效果的方法詳解》詳細介紹了JS實現(xiàn)焦點圖輪播效果的步驟，這里來分析一下jQuery的相關實現(xiàn)技巧。
核心代碼如下：
$(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(".banner"); var $list_banner=$(".list-banner"); var index=1; var timer; var $list_img_f=$(".list-banner li:first"); var $list_img_l=$(".list-banner li:last"); $list_img_f.clone(true).appendTo($list_banner); $list_img_l.clone(true).prependTo($list_banner); function showDot($obj){ $obj.addClass("hover").siblings().removeClass("hover"); } function startMove(i){ $list_banner.stop().animate({left:-i*624},300,function(){ if(i<1){ showDot($list_num.eq(3)); } else if(i>4){ showDot($list_num.eq(0)); } else{ showDot($list_num.eq(i-1)); } if(i<1){ $list_banner.css("left",-2496); index=4; } else if(i>4){ $list_banner.css("left",-624); index=1; } }); } function autoPlay(){ timer=setInterval(function(){ $next.click(); },2000); } autoPlay(); $next.click(function(){ if(!$list_banner.is(":animated")){ //如果先index++再執(zhí)行startMove(index);會有點問題，點的快某個點會跳過 startMove(++index); } }); $prev.click(function(){ if(!$list_banner.is(":animated")){ startMove(--index); } }); $list_num.click(function(){ var i=$(this).index()+1; index=i; startMove(i); });});和js的區(qū)別：用.animate()方法代替js里要算的速度，每次滑行距離以及定時器setTimeout
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
