本帖最后由 群发软件 于 2017-6-3 20:52 编辑
Blendtrans滤镜可以使图片产生淡入淡出的幻灯效果
制作过程：
一、准备图片10张，文件名为0.jpg至9.jpg。
二、建立一个CSS样式作为图片边框。
<style>
body img{border:3 gold ridge}
</style>
三、将下列代码放到<head>间。
四、将下列代码放到<body>里。
如何实现一个幻灯图片的制作呢?方法当然有很多种.个人认为Web前端的开发是一种设计的思想和创作的思路.下面我将分几个步骤来介绍幻灯图片的制作.
Step1:素材的准备与背景图片的制作.
首先使用PhotoShop的圆角矩形工具制作出一张宽：370px、高为300px的背影图片，如下图1所示:
图1（370*300px）
其次，用PhotoShop中的标尺工具画出网格线。网格线的作用可以使得可以使得幻灯片中图片规划得更加合理，同时也可以量出所需小图片(图1为背景图片，小图片是指幻灯片的内容图片).如下图2所示：
图2 画了网格线后的背景图
最后根据图2中网格线的规划，我们需要制用3张大图（350*212px）和三张相对应的小图(108*65px),如图3所示:
图3：制作好的六张图片
Step2:使用Dreamweaver制作网页内容
在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。 使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果 htm代码：[html] <div id="focusNews" style="visibility:hidden;" class="ifocus" > <a href="test.aspx" target="_blank"><img src="images/1.jpg" alt="标题一" /></a> <a href="test.aspx" target="_blank"><img src="images/2.jpg" alt="标题二" /></a> <a href="test.aspx" target="_blank"><img src="images/3.jpg" alt="标题三" /></a> <a href="test.aspx" target="_blank"><img src="images/4.jpg" alt="标题四" /></a> <a href="test.aspx" target="_blank"><img src="images/5.jpg" alt="标题五" /></a> <a href="test.aspx" target="_blank"><img src="images/6.jpg" alt="标题六" /></a> </div> js代码：[javascript] $(function () { $("#focusNews").KinSlideshow({ // moveStyle:"down", //设置切换方向为向下 [默认向左切换] intervalTime:8, //设置间隔时间为8秒 [默认为5秒] mouseEvent:"mouseover", //设置鼠标事件为“鼠标滑过切换” [默认鼠标点击时切换] titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px，颜色：#FF0000 }); }) 设置图片大小的CSS[css] .ifocus{width:400px;height:300px;visibility:hidden;} .ifocus img{width:700px;height:400px; }
|( 京ICP备09078825号 )
发表于 2017-6-3 20:48:50
收藏
