快捷導(dǎo)航

Jquery焦點(diǎn)圖實(shí)例代碼

更新時(shí)間：2014年11月25日 14:43:50 投稿：shichen2014

這篇文章主要介紹了Jquery焦點(diǎn)圖實(shí)例代碼,詳細(xì)講述了使用jQuery實(shí)現(xiàn)焦點(diǎn)圖的詳細(xì)步驟,代碼中備有較為詳盡的注釋說明,便于大家理解,需要的朋友可以參考下

本文實(shí)例講述了Jquery焦點(diǎn)圖實(shí)例代碼。分享給大家供大家參考。具體如下：

對(duì)于很多建站的朋友來(lái)講，焦點(diǎn)圖并不陌生，一般的企業(yè)站，門戶站都會(huì)用到焦點(diǎn)圖。我們平時(shí)在寫html代碼的時(shí)候，很多人為了省時(shí)省力，對(duì)于焦點(diǎn)圖都是在網(wǎng)上下載一些人家寫好的代碼，直接套上去即可，很多時(shí)候我自己也是這樣來(lái)的。因?yàn)橐粋€(gè)焦點(diǎn)圖有html布局，css樣式調(diào)試和最關(guān)鍵的 javascript語(yǔ)句的編寫。這些都是一個(gè)很麻煩的過程。

今天我就以實(shí)例講解，手把手教你如何寫Jquery焦點(diǎn)圖。Jquery是js封裝的框架，讓js的語(yǔ)法變得簡(jiǎn)單，很多知名網(wǎng)站都在用這個(gè)框架。這里星仔為了語(yǔ)法的簡(jiǎn)單，讓大部分網(wǎng)友能看懂，也引用Jquery框架。

長(zhǎng)話短說，我直接貼出源代碼，和對(duì)應(yīng)的注釋。具體代碼如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<title>focus code powered by boyxing.com</title>

<script type="text/javascript" src="js/jquery.js"></script><!--引用Jquery框架-->

<!--css定義，可以根據(jù)需要自己定義-->

<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>

<!--焦點(diǎn)圖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><!--焦點(diǎn)圖個(gè)數(shù)不限-->

    </ul>

  </div>

</div>

<!--焦點(diǎn)圖div部分結(jié)束-->

</body>

<script type="text/javascript">

$(document).ready(function(){

var num=$(".bigpic li").length;//獲取焦點(diǎn)圖的個(gè)數(shù)

var fwidth=$(".bigpic li").width();//獲取每個(gè)焦點(diǎn)圖的寬度

var sec=4000;//時(shí)間切換間隔

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);//自動(dòng)根據(jù)焦點(diǎn)圖個(gè)數(shù)，添加切換按鈕，如果只有一張圖片則不顯示切換按鈕。

$(".bigpic").css("width",fwidth*num);//設(shè)定大圖集合的寬度，也就是所有焦點(diǎn)圖寬度的和。

$(".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);}

);//鼠標(biāo)指向按鈕，焦點(diǎn)圖切換到對(duì)應(yīng)位置，按鈕樣式改變。mouseover是鼠標(biāo)經(jīng)過時(shí)，這里也可以改成click，通過點(diǎn)擊切換焦點(diǎn)圖。

picTimer = setInterval(timeset,sec); //指定sec毫秒后執(zhí)行一次timeset函數(shù)。

function timeset(){

  var j = $(".btn li").index($(".on"));//取得 當(dāng)前焦點(diǎn)圖的位置，即class為on的序號(hào)。

  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);}

);//當(dāng)鼠標(biāo)指向焦點(diǎn)圖或者是切換按鈕時(shí)，定時(shí)器清除，即不在執(zhí)行自動(dòng)切換，鼠標(biāo)離開則恢復(fù)自動(dòng)切換。

})

</script>

</html>