产品广告效果

在实现这个效果之前，先分析下如何来完成这下效果。在产品广告下方有5个缩略文字介绍，它们分别代表5张广告图，如图1所示

图1 产品广告效果

当光标滑过文字1时，需要显示第1张图片；当光标滑过文字2时，需要显示第2张图片；依此类推。因此，如果能正确获取到当前滑过的文字的索引值，.那么完成果就非常简单了。

新建JavaScript文档，保存为ad.js。输入下面代码：

/* 首页大屏广告效果 */
$(function(){
	var $imgrolls = $("#jnImageroll div a");
	$imgrolls.css("opacity","0.7");
    var len  = $imgrolls.length;
	var index = 0;
	var adTimer = null;
	$imgrolls.mouseover(function(){
		index = $imgrolls.index(this);
		showImg(index);
	}).eq(0).mouseover();	
	//滑入 停止动画，滑出开始动画.
	$('#jnImageroll').hover(function(){
			if(adTimer){ 
				clearInterval(adTimer);
			}
		 },function(){
			adTimer = setInterval(function(){
			    showImg(index);
				index++;
				if(index==len){index=0;}
			} , 5000);
	}).trigger("mouseleave");
})
//显示不同的幻灯片
function showImg(index){
	var $rollobj = $("#jnImageroll");
	var $rolllist = $rollobj.find("div a");
	var newhref = $rolllist.eq(index).attr("href");
	$("#JS_imgWrap").attr("href",newhref)
			 .find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
	$rolllist.removeClass("chos").css("opacity","0.7")
			 .eq(index).addClass("chos").css("opacity","1"); 
}

在上面代码中，定义了一个showImg()函数，然后给函数传递了一个参数index，index代表当前要显示图片的索引。

获取当前滑过的元素在所有元素中的索引可以使用jQuery的index()方法。其中，.eq(0).mouseover()部分是用来初始化的，让第1个文字高亮并显示第1个图片。