jQuery写的一个幻灯片

最新推荐文章于 2024-11-14 10:50:47 发布

原创最新推荐文章于 2024-11-14 10:50:47 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #浏览器 #ViewUI

本文介绍了一种利用HTML、CSS及jQuery实现的图片滑动展示效果，包括大图展示和小图预览功能。通过鼠标悬停交互，实现图片平滑过渡及缩略图的半透明效果。

<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});
});
为了通过验证，把半透明的代码写在 JS 里，半透效果的 CSS 代码不能通过验证就不用说了吧，而且要兼容浏览器得写三句。