jQuery编写的超酷幻灯片效果

2016-02-19 13:56 10 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的jQuery编写的超酷幻灯片效果,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

看看代码咯,XHTML 代码:

div id="slide"
a href="#" id="this_a"img src="images/1.jpg" id="this_pic" //a
ul id="pic_list"
lia href="http://www.qq.com"img src="images/1.jpg" alt="" //a/li
lia href="http://www.sina.com"img src="images/2.jpg" alt="" //a/li
lia href="http://www.163.com"img src="images/3.jpg" alt="" //a/li
lia href="http://www.baidu.com"img src="images/4.jpg" alt="" //a/li
lia 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 全部选择 提示:你可先修改部分代码,再按运行]

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

来源:http://www.tulaoshi.com/n/20160219/1605719.html

延伸阅读
为PowerPoint2010幻灯片添加换片效果   ①启动PowerPoint2010,单击文件--打开,弹出本地对话框,选取要进行打开的ppt文件。 ②文件打开之后,单击菜单栏--切换--切换方案。 ③然后在众多的切换方案里面选取一种,例如我选的就是时钟。 ④设置好了换片方式,我们可以从最左侧的视图中查看,幻灯片添加了五角...
标签: 电脑入门
①启动PowerPoint2010,单击文件--打开,弹出本地对话框,选取要进行打开的ppt文件。 ②文件打开之后,单击菜单栏--切换--切换方案。 ③然后在众多的切换方案里面选取一种,例如我选的就是时钟。 ④设置好了换片方式,我们可以从最左侧的视图中查看,幻灯片添加了五角星图标的显然就是有动画效果的幻灯片。
通过设置幻灯片的版式我们可以更快捷的制作幻灯片,提高工作效率,大大减少工作时间。经常使用PowerPoint2007的用户不会不知道在PowerPoint2007中怎么设置幻灯片的版式吧?下面为大家演示下,你不要错过。 简述 首先单击“幻灯片”组中的“版式”按钮,从下拉菜单中选择一种版式。双击缩略图并插入之前选择好的图片,返...
标签: 电脑入门
在幻灯片的制作过程中,可以随时进行幻灯片的放映,观看幻灯片的显示及动画效果,以便用户可以随时对幻灯片进行编辑和修改操作。 步骤1:单击文件 打开命令,打开一个演示文稿,如下图所示。 步骤2:在开始面板的幻灯片放映面板中,单击开始放映幻灯片选项板中的从头开始按钮,如下图所示。 步骤3:执行操作后,即可播放幻...
标签: 电脑入门
PowerPoint2007从幻灯片窗格中新建幻灯片 可以使用一种非常快捷的方法来新建幻灯片一-基于默认版式。这是最简单的方法了: 1.在"普通"视图下,在"幻灯片"窗格中单击新幻灯片应接于其后的幻灯片。 2. 按Enter 键,即出现使用"标题和内容"版式的新幻灯片。 这种方法的缺陆在于无法指定版式。要选择默认版式以外...

经验教程

860

收藏

20
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部