最近做一個網站，需要用上一個大幅點的幻燈片，幻燈片這東西網上一搜一大把，所以就想去“淘”一個，省點工夫，但"淘"了好一些都不滿意，不是太老土、不美觀，就是不兼容或到不到想要的結果等等，最後決定自己就寫了一個。
看看代碼咯，XHTML 代碼：
<div id="slide">
<a href="#" id="this_a"><img src="images/1.jpg" id="this_pic" /></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;
background:#000; z-index:1; border-top:1px solid #fff;}
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});
});
為了通過驗證，把半透明的代碼寫在 JavaScript裡，半透效果的 CSS 代碼不能通過驗證就不用說了吧，而且要兼容浏覽器得寫三句。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
代碼不多，但效果我覺得還可以。如果您覺得有什麼地方不夠好，或有更好的實現方法，歡迎留言。