|
最近做一个网站，需要用上一个大幅点的幻灯片，幻灯片这东西网上一搜一大把，所以就想去“淘”一个，省点工夫，但"淘"了好一些都不满意，不是太老土、不美观，就是不兼容或到不到想要的结果等等，最后决定自己就写了一个。
看看代码咯，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 全部选择 提示：你可先修改部分代码，再按运行]
代码不多，但效果我觉得还可以。如果您觉得有什么地方不够好，或有更好的实现方法，欢迎留言。
(责任编辑：admin) |
