新手自学：怎样在html中引入幻灯片代码网页特效

来源：蜘蛛抓取(WebSpider) 时间：2015-03-09 07:45 标签： 幻灯片代码
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
本类推荐素材
十分简洁漂亮的HTML5弹出对话框效果，基于jQuery来实
这是一个使用jQuery插件实现的伸缩效果，在网页上
本Js效果图使用文字闪烁和mask滤镜来完成，是一个
Js实现图片上传前的预览功能，主要是使用html5 的
这个效果我暂时说不上名字哦，在网页最开如加载
超全面的JS图片特效集，运用jQ实现的焦点图片切换
这应该算是一个布局方面的技巧吧，借助jquery插件
一个CSS3图片链接效果，并且给图片加上边框阴影的
CSS3/HTML5代码实例，实现一个可爱的叮当猫图案，如
jquery鼠标移到Image图片上时显示文字说明的效果，算
本站所有作品均为会员提供或网上搜集，版权归原作者所有，如需商业用途或转载请与作者联系。本站内容仅供观摩学习交流之用，将不对任何资源负法律责任。
CopyRight &
zzTuKu.com, All Rights Reserved 站长图库 版权所有 湘ICP备号-1未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口网页特效-网页特效技巧-网页特效经验-中国学网
　　　　　
最新新闻报道
28日 | 28日 | 28日 | 28日 | 28日 |
[专栏]本网视点
网页特效排行榜
12日[] 12日[] 12日[] 27日[] 08日[]
08日[] 08日[] 08日[] 30日[] 31日[]
08日[] 30日[] 28日[] 09日[] 09日[]
08日[] 08日[] 08日[] 08日[] 30日[]
08日[] 08日[] 08日[] 08日[] 08日[]
08日[] 08日[] 08日[] 30日[] 30日[]
29日[] 04日[] 12日[] 08日[] 08日[]
22日[] 22日[] 22日[] 22日[] 22日[]
22日[] 08日[] 08日[] 08日[] 08日[]
08日[] 08日[] 08日[] 30日[] 30日[]
22日[] 22日[] 22日[] 22日[] 22日[]
22日[] 22日[] 22日[] 22日[] 22日[]
08日[] 30日[] 30日[] 26日[] 26日[]
15日[] 09日[] 09日[] 09日[] 09日[]
22日[] 22日[] 22日[] 22日[] 22日[]
08日[] 26日[] 26日[] 26日[] 26日[]
22日[] 22日[] 22日[] 22日[] 22日[]
26日[] 26日[] 26日[] 26日[] 26日[]
频道导航： |
网站导航： |HTML5入门教程
授课讲师：
吉延鹏 老师
软件版本：
sublime text 3.0
教程程度：
所需基础：
熟悉电脑操作
交流提问：
适合人群：
网页制作的相关人员
相关素材：
课程光盘：
6074 124034 89477 60180 47457 43019 33160 40238 31690 32223 27521 27906 28708 23316 21953 27053 23394 21814 24001 17465 15296 12025 402 21457 19248 16678 14680 14930 12879 12362
论坛最新主题
您可能感兴趣的课程
讲解网页制作的每个环节，使学员能运用Dreaweaver完成网站的开发。
网页三剑客进行网页设计，并用iis+Access+Asp实现动态网站。
讲解CSS+DIV的应用、JavaScript及Ajax开发更生动的网页。
学开店流程，店铺装修及美工,进货，营销管理，物流，售后评价跟踪等。
赞助商链接
兴趣圈成员Dreamweaver制作网页幻灯片效果的方法
想要一个漂亮的幻灯片效果吗。Dreamweaver完全可以胜任，给朋友说一下方法作为一位不懂代码的业余网页制作爱好者，常常羡慕专业程序人员在浏览器中编制出的效
想要一个漂亮的幻灯片效果吗。Dreamweaver完全可以胜任，给朋友说一下方法
作为一位不懂代码的业余网页制作爱好者，常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品。唉，无奈程序那东东，酶涩南学，非一日之功，需要良好的逻辑思维能力和足够的磨练方可成就。是不是不会程序，就永远就不能实现自己的创意和想法了呢？非也！现在我们要制作的就是在网页中的一个幻灯片播放器。当用户按下控制盘上的&PLAY&键时图片将作幻灯片似的连续循环播放。按下&PAUSE&时，播放中的图片就停留在当前位置。按下&RESTART&键时，幻灯片又从头播放。而这一切，仅仅采用Dreamweaver3的内嵌的层（Layer）、时间链（Timeline）和行为（Behavior）技术，就可实现，所有的JavaScript代码都会在Dreamweaver中自动生成。这里不是鼓励大家不要接触程序代码，相反，若读者掌握了一些编程技术的基础，会在网页制作中起到相当重要的作用。实际上，这已是当今专业WEB页面制作人员的一项基本素质要求。 下面分步骤对这个播放器的制作加以说明。 步骤一：图形元素的制作和准备。 制作幻灯片所用的图片并将之放入Dreamweaver的层中。我们准备在每个幻灯片中实现7幅图片的交替变换，因此我们需要制作7幅内容不同的图片。注意图片要在Photoshop中进行优化压缩，并调整成相同的尺寸。建立一个层，插入初始图片，该图片就是幻灯片默认得头一张图片。将层命名为Layer_main，并把该层的Index值设为1。 步骤二：制作播放器的外观和四个控制按钮。 利用Photoshop制作一个金属效果的播放器外观。（具体效果就看你的喜好啦，也许你可从Winamp的skin中受点启发）。作最佳优化后，输出一个透明的GIF图片。为了让鼠标移上后按钮有些变化，你不得不每个按钮制作2张图片（共6个），两个按钮只需有颜色上的差异即可。先建三个层，调整好位置，并插入三个播放键的各自的二张翻滚图片（Rollover Image）（Insert-Rollover Image）。通过调节层的Index-Z的值，确保播放器所在的层在Layer_main层的上面，在按钮所在层的下面。排版好的各层如图1所示。步骤三：创建幻灯片播放时间链。 按Ctrl+F9键打开时间链浮动工具面板。选取其中幻灯片所在层(Layer_main)中的初始图片(确保选取的是图像，而不是层)，用鼠标拖至时间链浮动工具面板，在时间链起始处释放鼠标。设定帧速率为Fps为5，并勾选Loop框。选择时间链中的其中一帧，右击鼠标，选择&Add Keyframe&（添加关键帧），选择另一幅幻灯片图片，以更换层(Layer_main)中的初始图片。重复这个操作，将剩下的5幅图片全部加到该时间链的不同关键帧上。最后适当调节各关键帧之间的距离。并将该时间链命名为TimeLine_main。建立好的时间链如图2所示。步骤四：为按钮和其它添加行为（Behavior）。 点击选择PLAY按钮所在的图片，在行为浮动工具面板中，从+（添加）动作下拉列表中选择Timeline-Play Timeline(播放时间链)，并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下，就会为切换动作设置一个onClick事件。点击选择PAUSE所在的图片。在行为浮动工具面板中，从+（添加）动作下拉列表中选择Timeline---Stop Timeline(停止播放时间链)，并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下，就会为切换动作设置一个onClick事件。 点击选择REPLAY所在的图片。在行为浮动工具面板中，从+（添加）动作下拉列表中选择Timeline---Go to Timeline Frame(转向放时间链帧)，并在弹出的对话框中选择时间链Timeline_main，在Frame文本框中输入1。单击OK。默认方式下，就会为切换动作设置一个onClick事件。再添加下一个动作。从+（添加）动作下拉列表中选择Timeline---Play Timeline(播放时间链)，并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下，就会为切换动作设置一个onClick事件。REPLAY的图片添加好的行为如图3所示。本例中做好的播放器，可在下列地址浏览：/sample/index.htm。进一步，为了让播放器更加生动，你可以同时给幻灯片的播放加上声音。 若要把这个播放器放到网上，同时图片总容量超过150K，可以给页面作一个&Loading（加载）层&，待全部内容下载完毕后，才显示出来。以免由于图片未下载完而产生播放不畅的感觉。关于&Loading&层的制作方法，在很多地方有介绍，这里就不再详述了。 把这个例子变通一下，我们可以作一个相册。你可以把你的家庭或女朋友的相片加在幻灯片所在的时间链上，并且加上Last（上一张）、 Next（下一张）等按钮，便于浏览者逐张欣赏。若觉得相片太小不能看清楚细节，你还可以加一个Zoom In（放大）按钮，链接到一个有单张放大相片的新窗口页面。最后把它放到网上，相信一定会给你的家人或女朋友带去一份惊喜。
（本文由 |芯晴网页特效 收集丨）
文章地址：/article-4868-1.html
------分隔线----------------------------

我要回帖

更多关于 幻灯片代码 的文章

 

随机推荐