本文實例講述了Jquery焦點圖實例代碼。分享給大家供大家參考。具體如下：
對于很多建站的朋友來講，焦點圖并不陌生，一般的企業站，門戶站都會用到焦點圖。我們平時在寫html代碼的時候，很多人為了省時省力，對于焦點圖都是在網上下載一些人家寫好的代碼，直接套上去即可，很多時候我自己也是這樣來的。因為一個焦點圖有html布局，css樣式調試和最關鍵的 javascript語句的編寫。這些都是一個很麻煩的過程。
今天我就以實例講解，手把手教你如何寫Jquery焦點圖。Jquery是js封裝的框架，讓js的語法變得簡單，很多知名網站都在用這個框架。這里星仔為了語法的簡單，讓大部分網友能看懂，也引用Jquery框架。
長話短說，我直接貼出源代碼，和對應的注釋。具體代碼如下：
復制代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>focus code powered by boyxing.com</title>
<script type="text/javascript" src="js/jquery.js"></script><!--引用Jquery框架-->
<!--css定義，可以根據需要自己定義-->
<style type="text/css">
body,ul,li{ margin:0; padding:0}
ul,li{ list-style:none;}
.focus{ margin:0 auto; height:320px; width:980px; overflow:hidden; position:relative; padding:0;}
.focus .bigpic{ position:absolute;padding:0;}
.focus .bigpic li{ width:980px;float:left;padding:0;}
.focus .btn{ overflow:hidden; height:30px;position:absolute; bottom:3px; left:50%; margin-left:-100px;}
.focus .btn li{ float:left; margin:0 10px; padding:5px; cursor:pointer; background: #fff;border:1px #900 solid;border-radius:12px; height:12px; width:12px; overflow:hidden; text-align:center; line-height:12px;opacity:0.6; float:left;}
.focus .btn li.on{ background: #990000; color:#FFFFFF;}
</style>
</head>
<body>
<!--焦點圖div部分開始-->
<div class="focus">
<div class="focuscon">
<ul class="bigpic">
<li><a href="#"><img src="fbc60c3991284b6ffdb0aa11a1708c41.jpg" border="0"></a></li>
<li><a href="#"><img src="3d41450340fe053008f8437011b7bcf5.jpg" border="0"></a></li>
<li><a href="#"><img src="c9a787ef199d47bdb3529bbdecfc989c.jpg" border="0"></a></li>
<li><a href="#"><img src="2471eddde718c56879171814c8a52153.jpg" border="0"></a></li><!--焦點圖個數不限-->
</ul>
</div>
</div>
<!--焦點圖div部分結束-->
</body>
<script type="text/javascript">
$(document).ready(function(){
var num=$(".bigpic li").length;//獲取焦點圖的個數
var fwidth=$(".bigpic li").width();//獲取每個焦點圖的寬度
var sec=4000;//時間切換間隔
var btn = '<ul class="btn"><li class="on">1</li>';
var btnend = '</ul>';
for(i=2;i<=num;i++){btn += '<li>'+i+'</li>';};
btn += btnend;
if(num == 1){btn = null};
$(".focus").append(btn);//自動根據焦點圖個數，添加切換按鈕，如果只有一張圖片則不顯示切換按鈕。
$(".bigpic").css("width",fwidth*num);//設定大圖集合的寬度，也就是所有焦點圖寬度的和。
$(".btn li").bind("mouseover",function(){
$(this).addClass("on").siblings().removeClass("on");
var i=$(".btn li").index(this);var marginL=fwidth*i;
$(".bigpic").animate({"left":-marginL},500);}
);//鼠標指向按鈕，焦點圖切換到對應位置，按鈕樣式改變。mouseover是鼠標經過時，這里也可以改成click，通過點擊切換焦點圖。
picTimer = setInterval(timeset,sec); //指定sec毫秒后執行一次timeset函數。
function timeset(){
var j = $(".btn li").index($(".on"));//取得 當前焦點圖的位置，即class為on的序號。
var timew = fwidth*(j+1);
if(j == num-1){$(".btn li").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":0},500);}
else{$(".btn li").eq(j+1).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":-timew},500);};
};
$(".focus").mouseover(function(){clearInterval(picTimer);});
$(".focus").bind("mouseout",function(){picTimer = setInterval(timeset,sec);}
);//當鼠標指向焦點圖或者是切換按鈕時，定時器清除，即不在執行自動切換，鼠標離開則恢復自動切換。
})
</script>
</html>
<html>
<head>
<title>focus code powered by boyxing.com</title>
<script type="text/javascript" src="js/jquery.js"></script><!--引用Jquery框架-->
<!--css定義，可以根據需要自己定義-->
<style type="text/css">
body,ul,li{ margin:0; padding:0}
ul,li{ list-style:none;}
.focus{ margin:0 auto; height:320px; width:980px; overflow:hidden; position:relative; padding:0;}
.focus .bigpic{ position:absolute;padding:0;}
.focus .bigpic li{ width:980px;float:left;padding:0;}
.focus .btn{ overflow:hidden; height:30px;position:absolute; bottom:3px; left:50%; margin-left:-100px;}
.focus .btn li{ float:left; margin:0 10px; padding:5px; cursor:pointer; background: #fff;border:1px #900 solid;border-radius:12px; height:12px; width:12px; overflow:hidden; text-align:center; line-height:12px;opacity:0.6; float:left;}
.focus .btn li.on{ background: #990000; color:#FFFFFF;}
</style>
</head>
<body>
<!--焦點圖div部分開始-->
<div class="focus">
<div class="focuscon">
<ul class="bigpic">
<li><a href="#"><img src="fbc60c3991284b6ffdb0aa11a1708c41.jpg" border="0"></a></li>
<li><a href="#"><img src="3d41450340fe053008f8437011b7bcf5.jpg" border="0"></a></li>
<li><a href="#"><img src="c9a787ef199d47bdb3529bbdecfc989c.jpg" border="0"></a></li>
<li><a href="#"><img src="2471eddde718c56879171814c8a52153.jpg" border="0"></a></li><!--焦點圖個數不限-->
</ul>
</div>
</div>
<!--焦點圖div部分結束-->
</body>
<script type="text/javascript">
$(document).ready(function(){
var num=$(".bigpic li").length;//獲取焦點圖的個數
var fwidth=$(".bigpic li").width();//獲取每個焦點圖的寬度
var sec=4000;//時間切換間隔
var btn = '<ul class="btn"><li class="on">1</li>';
var btnend = '</ul>';
for(i=2;i<=num;i++){btn += '<li>'+i+'</li>';};
btn += btnend;
if(num == 1){btn = null};
$(".focus").append(btn);//自動根據焦點圖個數，添加切換按鈕，如果只有一張圖片則不顯示切換按鈕。
$(".bigpic").css("width",fwidth*num);//設定大圖集合的寬度，也就是所有焦點圖寬度的和。
$(".btn li").bind("mouseover",function(){
$(this).addClass("on").siblings().removeClass("on");
var i=$(".btn li").index(this);var marginL=fwidth*i;
$(".bigpic").animate({"left":-marginL},500);}
);//鼠標指向按鈕，焦點圖切換到對應位置，按鈕樣式改變。mouseover是鼠標經過時，這里也可以改成click，通過點擊切換焦點圖。
picTimer = setInterval(timeset,sec); //指定sec毫秒后執行一次timeset函數。
function timeset(){
var j = $(".btn li").index($(".on"));//取得 當前焦點圖的位置，即class為on的序號。
var timew = fwidth*(j+1);
if(j == num-1){$(".btn li").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":0},500);}
else{$(".btn li").eq(j+1).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":-timew},500);};
};
$(".focus").mouseover(function(){clearInterval(picTimer);});
$(".focus").bind("mouseout",function(){picTimer = setInterval(timeset,sec);}
);//當鼠標指向焦點圖或者是切換按鈕時，定時器清除，即不在執行自動切換，鼠標離開則恢復自動切換。
})
</script>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
