Jquery焦点图实例代码
本文实例讲述了Jquery焦点图实例代码。分享给大家供大家参考。具体如下：
对于很多建站的朋友来讲，焦点图并不陌生，一般的企业站，门户站都会用到焦点图。我们平时在写html代码的时候，很多人为了省时省力，对于焦点图都是在网上下载一些人家写好的代码，直接套上去即可，很多时候我自己也是这样来的。因为一个焦点图有html布局，css样式调试和最关键的javascript语句的编写。这些都是一个很麻烦的过程。
今天我就以实例讲解，手把手教你如何写Jquery焦点图。Jquery是js封装的框架，让js的语法变得简单，很多知名网站都在用这个框架。这里星仔为了语法的简单，让大部分网友能看懂，也引用Jquery框架。
长话短说，我直接贴出源代码，和对应的注释。具体代码如下：
<!DOCTYPEhtml>
<html>
<head>
<title>focuscodepoweredbyboyxing.com</title>
<scripttype="text/javascript"src="js/jquery.js"></script><!--引用Jquery框架-->
<!--css定义，可以根据需要自己定义-->
<styletype="text/css">
body,ul,li{margin:0;padding:0}
ul,li{list-style:none;}
.focus{margin:0auto;height:320px;width:980px;overflow:hidden;position:relative;padding:0;}
.focus.bigpic{position:absolute;padding:0;}
.focus.bigpicli{width:980px;float:left;padding:0;}
.focus.btn{overflow:hidden;height:30px;position:absolute;bottom:3px;left:50%;margin-left:-100px;}
.focus.btnli{float:left;margin:010px;padding:5px;cursor:pointer;background:#fff;border:1px#900solid;border-radius:12px;height:12px;width:12px;overflow:hidden;text-align:center;line-height:12px;opacity:0.6;float:left;}
.focus.btnli.on{background:#990000;color:#FFFFFF;}
</style>
</head>
<body>
<!--焦点图div部分开始-->
<divclass="focus">
<divclass="focuscon">
<ulclass="bigpic">
<li><ahref="#"><imgsrc="fbc60c3991284b6ffdb0aa11a1708c41.jpg"border="0"></a></li>
<li><ahref="#"><imgsrc="3d41450340fe053008f8437011b7bcf5.jpg"border="0"></a></li>
<li><ahref="#"><imgsrc="c9a787ef199d47bdb3529bbdecfc989c.jpg"border="0"></a></li>
<li><ahref="#"><imgsrc="2471eddde718c56879171814c8a52153.jpg"border="0"></a></li><!--焦点图个数不限-->
</ul>
</div>
</div>
<!--焦点图div部分结束-->
</body>
<scripttype="text/javascript">
$(document).ready(function(){
varnum=$(".bigpicli").length;//获取焦点图的个数
varfwidth=$(".bigpicli").width();//获取每个焦点图的宽度
varsec=4000;//时间切换间隔
varbtn='<ulclass="btn"><liclass="on">1</li>';
varbtnend='</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);//设定大图集合的宽度，也就是所有焦点图宽度的和。
$(".btnli").bind("mouseover",function(){
$(this).addClass("on").siblings().removeClass("on");
vari=$(".btnli").index(this);varmarginL=fwidth*i;
$(".bigpic").animate({"left":-marginL},500);}
);//鼠标指向按钮，焦点图切换到对应位置，按钮样式改变。mouseover是鼠标经过时，这里也可以改成click，通过点击切换焦点图。
picTimer=setInterval(timeset,sec);//指定sec毫秒后执行一次timeset函数。
functiontimeset(){
varj=$(".btnli").index($(".on"));//取得当前焦点图的位置，即class为on的序号。
vartimew=fwidth*(j+1);
if(j==num-1){$(".btnli").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":0},500);}
else{$(".btnli").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程序设计有所帮助。