首页 > 代码库 > Jquery焦点图实例

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="http://www.boyxing.com/skin/default/js/jquery.js"></script& gt;<!--引用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="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/fbc60c3991284b6ffdb0aa11a1708c41.jpg" border="0"></a></li>

      <li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/3d41450340fe053008f8437011b7bcf5.jpg" border="0"></a></li>

      <li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/c9a787ef199d47bdb3529bbdecfc989c.jpg" border="0"></a></li>

      <li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/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>

------代码结束-------

 

本文出自:http://www.boyxing.com/article/136.html

Jquery焦点图实例