漂亮的jQuery焦点图代码分享

三张焦点图切换的jquery代码分享，方便你做网站焦点图使用；

tips：使用之前记得引用jquery包～

css代码

/*一个漂亮的焦点图*/
#img_scroll{width:546px;height:220px; overflow:hidden;padding:8px; background:#444; border:#333 4px solid; margin:0 auto;}
#img_small{width:120px;float:left;position:relative;}
#img_small a{display:block;margin-bottom:5px;}
#img_small img{height:70px;}
#img_small .curr{width:176px;height:73px;position:absolute;left:0;top:0;}
#img_big{width:405px;height:220px;float:right;position:relative;}
#img_big a{display:none;position:absolute;left:0px;top:0;}

js代码

//一个漂亮的焦点图
$(function($){
	var showtime = 0;
	$("#img_small a:lt(3)").mouseover(function(){
		var showtime = $("#img_small a:lt(3)").index(this);
		showImg(showtime)	


	});
	$("#img_scroll").hover(function(){
		if(settime)clearInterval(settime);
	},function(){
		settime = setInterval(function(){
			showImg(showtime)
			showtime++;
			if(showtime==3){showtime=0;}
		} , 3000);
	});
	var settime = setInterval(function(){
		showImg(showtime)
		showtime++;
		if(showtime==3){showtime=0;}
	} , 3000);
})
function showImg(i){
	var Link = $("#img_small").eq(i).find("a").attr("href");
	$("#img_small .curr").attr("href",Link);
	$("#img_big a").eq(i).fadeIn(800).siblings("a").fadeOut(600);
	$("#img_small .curr").animate( { top: (i*75) } , 300);
}

html代码