jQuery写的一个幻灯片

最近做一个网站，需要用上一个大幅点的幻灯片，幻灯片这东西网上一搜一大把，所以就想去“淘”一个，省点工夫，但"淘"了好一些都不满意，不是太老土、不美观，就是不兼容或到不到想要的结果等等，最后决定自己就写了一个。 看看代码咯。

XHTML 代码：

<div id="slide">
	<a href="#" id="this_a"><img src="images/1.jpg" id="this_pic" alt="" /></a>
	<ul id="pic_list">
		<li><a href="http://www.qq.com"><img src="images/1.jpg" alt="" /></a></li>
		<li><a href="http://www.sina.com"><img src="images/2.jpg" alt="" /></a></li>
		<li><a href="http://www.163.com"><img src="images/3.jpg" alt="" /></a></li>
		<li><a href="http://www.baidu.com"><img src="images/4.jpg" alt="" /></a></li>
		<li><a href="http://www.17css.com"><img src="images/5.jpg" alt="" /></a></li>
	</ul>
	<span id="transparence"></span>
</div>

说明：#slide是最外面的容器，#this_pic是要显示的大图，#pic_list是图片缩略图，#transparence是一个半透明的层，因为想给#pic_list和里的缩略图应用半透明效果，但半透明效果会继承，无法更改，所以模拟了这个层。

CSS 代码：

#slide {
	position:relative;
	width:740px;
	height:240px;
	margin:20px auto;
}
#pic_list {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	list-style: none;
	overflow:hidden;
	z-index:2;
}
#pic_list li {
	float:left;
	width:100px;
	height:52px;
	padding-top:10px;
}
#pic_list li img {
	position:absolute;
	top:18px;
	width:65px;
	height:35px;
	margin:0 20px;
	border:1px solid #fff;
}
#this_pic {
	position:absolute;
	width:100%;
	height:100%;
	border:none;
}
#transparence {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:50px;
	border-top:1px solid #fff;
	background:#000;
	z-index:1;
}

jQuery 代码：

$(function (){
	$('#pic_list img').mouseover(function(){
	//如果鼠标移到的缩略图的地址和大图地址相等，则返回
	if($('#this_pic').attr('src') == $(this).attr('src')) return;
		//大幅图片淡出
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$(this).attr('src'));
		//把缩略图的链接地址传给大图的链接
		$('#this_a').attr('href',$(this).parents('a').attr('href'));
		//除此之外的缩略图位置和半透明还原
		$(this).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$(this).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		//当前的缩略图上升动画效果
		$(this).animate({top:0},500).css('opacity','1');
	});
});
//初始化
$(function(){
	//模拟层半透明
	$('#transparence').css('opacity','0.4');
	//所有缩略图半透明
	$('#pic_list img').css({'opacity':'0.6'});
	//第一张缩略图的位置和不透明
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	//阻止缩略图链接
	$('#pic_list a').click(function(){return false});
});

为了通过验证，把半透明的代码写在 JS 里，半透效果的 CSS 代码不能通过验证就不用说了吧，而且要兼容浏览器得写三句。

查看Dome

代码不多，但效果我觉得还可以。如果您觉得有什么地方不够好，或有更好的实现方法，欢迎留言。