本文实例讲述了jquery焦点图实例代码。分享给大家供大家参考。具体如下：
对于很多建站的朋友来讲，焦点图并不陌生，一般的企业站，门户站都会用到焦点图。我们平时在写html代码的时候，很多人为了省时省力，对于焦点图都是在网上下载一些人家写好的代码，直接套上去即可，很多时候我自己也是这样来的。因为一个焦点图有html布局，css样式调试和最关键的 javascript语句的编写。这些都是一个很麻烦的过程。
今天我就以实例讲解，手把手教你如何写Jquery焦点图。Jquery是js封装的框架，让js的语法变得简单，很多知名网站都在用这个框架。这里星仔为了语法的简单，让大部分网友能看懂，也引用Jquery框架。
长话短说，我直接贴出源代码，和对应的注释。具体代码如下：
复制代码 代码如下:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"><br> $(document).ready(function(){<br> <br> var num=$(".bigpic li").length;//获取焦点图的个数<br> var fwidth=$(".bigpic li").width();//获取每个焦点图的宽度<br> var sec=4000;//时间切换间隔<br> <br> var btn = '<ul class="btn"><li class="on">1';<br> var btnend = '';<br> for(i=2;i<=num;i++){btn += '<li>'+i+'';};<br> btn += btnend;<br> if(num == 1){btn = null};<br> $(".focus").append(btn);//自动根据焦点图个数，添加切换按钮，如果只有一张图片则不显示切换按钮。<br> <br> $(".bigpic").css("width",fwidth*num);//设定大图集合的宽度，也就是所有焦点图宽度的和。<br> <br> $(".btn li").bind("mouseover",function(){<br> $(this).addClass("on").siblings().removeClass("on");<br> var i=$(".btn li").index(this);var marginL=fwidth*i;<br> $(".bigpic").animate({"left":-marginL},500);}<br> );//鼠标指向按钮，焦点图切换到对应位置，按钮样式改变。mouseover是鼠标经过时，这里也可以改成click，通过点击切换焦点图。<br> <br> picTimer = setInterval(timeset,sec); //指定sec毫秒后执行一次timeset函数。<br> function timeset(){<br> var j = $(".btn li").index($(".on"));//取得 当前焦点图的位置，即class为on的序号。<br> var timew = fwidth*(j+1);<br> if(j == num-1){$(".btn li").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":0},500);}<br> else{$(".btn li").eq(j+1).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":-timew},500);};<br> };<br> <br> $(".focus").mouseover(function(){clearInterval(picTimer);});<br> $(".focus").bind("mouseout",function(){picTimer = setInterval(timeset,sec);}<br> );//当鼠标指向焦点图或者是切换按钮时，定时器清除，即不在执行自动切换，鼠标离开则恢复自动切换。<br> <br> })<br> </script>
希望本文所述对大家的jQuery程序设计有所帮助。
