jquery焦点图入门实例

上一例通过简短的jQuery代码实现了简单、实用的选项卡切换效果，如果你也是刚刚接触jQuery的话，相信你也和我一样，已为jQuery强 大、高效的魅力所折服。对于javascript新手来说，jQuery确实是快速、高效的好帮手。希望我们能共同进步，在最短 的时间内掌握尽可能多的jQuery知识和用法。

今天我们就在上一例（选项卡切换）的基础上，来实现也很常用的“焦点图”效果。

效果图：（查看演示页面）

再来回顾一下选项卡切换效果的实现方法：总数相等的选项卡与内容一一对应；通过鼠标点击（click事件）获取到被点击的选项卡序号；找到被点击选项卡对应的内容；为该选项卡和该内容添加class以达到显示效果，并去除其它选项卡和内容的相应class。

不错！也许你已经想到了，焦点图和选项卡在结构上非常类似：总数相等的按钮与图片。那我们能不能用做选项卡切换的方法来做焦点图呢？当然，答案是肯定的！

HTML:

<div class="wrap">
	<ul class="imgb">
		<li class="selected"><a href="#"><img src="img/01.jpg" alt="jquery焦点图" /></a></li>
		<li><a href="#"><img src="img/02.jpg" alt="54173BLOG" /></a></li>
		<li><a href="#"><img src="img/03.jpg" alt="jquery图片轮换" /></a></li>
		<li><a href="#"><img src="img/04.jpg" alt="04" /></a></li>
		<li><a href="#"><img src="img/05.jpg" alt="05" /></a></li>
	</ul>

	<ul class="imgs"> <!--这里是小图，作为按钮使用-->
		<li class="selected"><img src="img/01.jpg" alt="01" /></li>
		<li><img src="img/02.jpg" alt="02" /></li>
		<li><img src="img/03.jpg" alt="03" /></li>
		<li><img src="img/04.jpg" alt="04" /></li>
		<li><img src="img/05.jpg" alt="05" /></li>
	</ul>
</div><!--wrap end-->

jQuery:

$(function() {
	var len = $(".imgs li").length; //获取图片总数
	var index = 0; //图片索引初始值

	$(".imgs li").click(function() {
		index = $(".imgs li").index(this); //获取被点击按钮的索引（序号）
		showPic(index); //通过showPic()函数显示此索引的图片
	});

	function showPic(index) {
		$(".imgb li").removeClass("selected").eq(index).addClass("selected");
		$(".imgs li").removeClass("selected").eq(index).addClass("selected");
	} //showPic()函数根据index来负责改变图片和按钮的class以达到显示图片的效果
});

嗯嗯，看起来不错嘛，好简单哦！不过好像还少了些什么：焦点图在无操作的情况下是会自己播放的耶！！

下面就要简单了解一下javascript中定期重复的方法：setInterval()。

setInterval(function() {……},time);

简单来说，setInterval()就是在指定的时间间隔（time）重复执行一段代码（function() {……}），中间用逗号“,”隔开。与它配对使用的还有clearInterval()，由于本人也是超级菜鸟，在这里就不误人子弟了，大家可以到w3school查阅setInterval()与clearInterval()的详细说明，在本例中，了解这些就够了。

下面的代码来负责每隔一段时间切换到下一张图片，并且鼠标在图片上时停止定期换图：

var picTimer;
$(".imgb").hover(function() {
	clearInterval(picTimer); //hover()方法，鼠标经过时停止计时
},function() {
	picTimer = setInterval(function() {
		showPic(index);
		index++;
		if(index==len) {index=0;}
	},3000); //鼠标滑出时开始计时并显示图片
}).trigger("mouseleave"); //.trigger("mouseleave") 初始化，即打开页面图片自动播放

很好，会自动播放、鼠标经过会停止的人性化焦点图终于完成了！

最终的完整代码和css样式请查看演示页面源文件。更多焦点图效果请关注下例《jQuery入门实例：焦点图特效合辑》。

切记，不会用javascript，学jQuery就要更加勤奋，源文件可以看但不要复制。手敲一遍胜过看十遍！

注：本例学习自《锋利的jQuery》一书。

本文由54173BLOG整理首发，转载请保留本文链接：http://www.54173.cn/blog/?p=469。