<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{color:#333; font-size:12px;}
a{color:#333; text-decoration:none;}
a:hover{text-decoration:underline;}
.focus{margin:0 auto; width:960px; height:315px; position:relative;} /*样式的相对定位*/
.jsNav{background:url(images/jsNav.png) no-repeat; position:absolute; width:125px; bottom:10px; height:30px; right:10px; font-weight:bold;} /*按钮用绝对定位，相对于外层的relative容器*/
.jsNav a{text-align:center; display:block; height:30px; width:25px; line-height:30px; float:left;}
.prevBtn{background:url(images/jsNav.png) 0 -30px no-repeat;}
.nextBtn{background:url(images/jsNav.png) -100px -30px no-repeat;}
.imgSelected{background:url(images/jsNav.png) 1px -60px no-repeat; color:#000;} /*鼠标移上去的样式 及自动切换到那一屏时 a 的样式*/
</style>
<SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(function(){
$("a").focus(function(){ //作用：去除点击 链接a时出现虚框
$(this).blur();
});
(function(){ //该匿名函数的可以看成是其它语言中命名空间的作用，主要是防止全局变量的相互污染，加了这个就不会影响到其它的地方
var curr=0,todo;
$("#jsNav .trigger").each(function(i){ //给每一个导航 a 添加click事件，切换至相应索引的图片
$(this).click(function(){
curr=i;
$("#focus img").eq(i).fadeIn("slow").siblings("img").hide();
$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
return false;
});
});
var pg=function(flag){ //flag:true表示前翻，flag:false表示后翻
if(flag){
if(curr==0){ //如果已经是第一项，则前翻到最后一项
todo=2;
}else{
todo=(curr-1)%3; //因为是前翻嘛，当然是curr-1
}
}
else{ //后翻
todo=(curr+1)%3;
}
$("#jsNav .trigger").eq(todo).click(); //触发相应按钮的点击事件
}
//前翻按钮
$("#prev").click(function(){
pg(true);
return false;
});
//后翻按钮
$("#next").click(function(){
pg(false);
return false;
});
//自动翻
var timer=setInterval(function(){ //用timer记录下间隔执行，以便后面 clearInterval清除
todo=(curr+1)%3;
$("#jsNav .trigger").eq(todo).click();
},2000);
//鼠标悬停在a上时停止自动翻
$("#jsNav a").hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
todo=(curr+1)%3;
$("#jsNav .trigger").eq(todo).click();
},2000);
});
})();
});
</SCRIPT>
<title>jQuery练习-焦点图片切换</title>
</head>
<body style="text-align:center">
<!--焦点图开始 -->
<div id="focus" class="focus">
<img src="images/01.jpg" /><img src="images/02.jpg" style="display:none" /><img src="images/03.jpg" style="display:none" />
<div id="jsNav" class="jsNav"><!--几个按钮-->
<a href="javascript:void(0)" id="prev" class="prevBtn"></a>
<a href="javascript:void(0)" class="trigger imgSelected">1</a>
<a href="javascript:void(0)" class="trigger">2</a>
<a href="javascript:void(0)" class="trigger">3</a>
<a href="javascript:void(0)" id="next" class="nextBtn"></a>
</div>
</div>
<!--焦点图结束-->
</body>
</html>
源文件：jQuery焦点图片切换