网页轮显幻灯片是怎么做的

04月25日,2020 ppt资讯 PPT教程网 134次

网页轮显幻灯片是怎么做的

09月22日, 2014 134次

用JS（JavaScript）+CSS或Applet做的；不用什么软件。透明渐变轮番显示制作方法：在<head>标签下，粘贴代码：<SCRIPT LANGUAGE="JavaScript">// 设置轮番显示速度 Set slideShowSpeed (milliseconds)var slideShowSpeed = 5000;// 匀滑转换时间 Duration of crossfade (seconds)var crossFadeDuration = 3;// 指定图像文件 Specify the image filesvar Pic = new Array();// to add more images, just continue// the pattern, adding to the array belowPic[0] = '1.jpg'Pic[1] = '2.jpg'Pic[2] = '3.jpg'Pic[3] = '4.jpg'Pic[4] = '5.jpg'// do not edit anything below this linevar t;var j = 0;var p = Pic.length;var preLoad = new Array();for (i = 0; i < p; i++) {preLoad = new Image();preLoad.src = Pic;}function runSlideShow() {if (document.all) {document.images.SlideShow.style.filter="blendTrans(duration=2)";document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";document.images.SlideShow.filters.blendTrans.Apply();}document.images.SlideShow.src = preLoad[j].src;if (document.all) {document.images.SlideShow.filters.blendTrans.Play();}j = j + 1;if (j > (p - 1)) j = 0;t = setTimeout('runSlideShow()', slideShowSpeed);}</script> 修改body： <body bgcolor="#FFFFFF" text="#000000" onLoad="runSlideShow()"> 将表格单元格设置名称“id=VU”： <td id=VU> 在<img>中加入代码：<img src="1.jpg" name='SlideShow'> 至此，我们的效果便制作好了。制作方法： 1. 在<head>中插入代码：<script language='javascript'>isns = navigator.appName == "Netscape";//定义播放图片张数img1=new Image()img2=new Image()img3=new Image()img4=new Image()img5=new Image()//图片路径、文件名img1.src='images/circul-side.gif'img2.src='images/css-manual.gif'img3.src='images/kpt7.jpg'img4.src='images/msn.jpg'img5.src='images/ps-}elsedocument.pic.visibility='visible'tt=setTimeout('change_img()',4000)}</script> 可以在代码中按照中文介绍，修改相关信息。 2. 在<body>中加载：<body onload="change_img();"> 3. 插入第一张图片，并命名：id="pic" 插入代码：style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)' 参考图片代码： <img src="images/circul-side.gif" name="pic" width="120" height="90" id="pic" style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'> 制作完成。观看效果使用CSS中的revealTrans滤镜制作超弦图片的播放CSS 中有revealTrans滤镜（具体介绍请参看巧用CSS的 RevealTrans 滤镜），也曾用该滤镜制作过各种图片播放的效果（类似于使用CSS滤镜revealTrans制作图片渐显效果）。知道其在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。制作方法： 1、在<head>中插入JS代码：<SCRIPT language=JavaScript1.2>function reapply(){setTimeout("slideit()",800)return true}window.onerror=reapply</SCRIPT><SCRIPT language=JavaScript1.1></SCRIPT> 其中：images/big 完整代码：<img src="images/circul-side.gif" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide> 4、给图片加超链接：<a href="javascript :slidelink()"> 5、加入代码：<SCRIPT> </STYLE>步骤三接下来立刻处理CSS的细节部分，还是在页首标签中插入JavaScript。在var numSLides =之后，设定要秀出的幻灯片数目（别设太多，因为每一张照片都会为网页增加可观的KB数）。我们的范例中有五张照片。以下是程序代码：<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;步骤四如果你想加入图片的解释说明文字，可以用下列的程序代码，将我们的说明文字换成你自己的说明文字：var captionTxt = new Array(numSlides);function setUpCaptions() {captionTxt[1] = "39号码头入口。"captionTxt[2] = "海狮在码头附近漫步。"captionTxt[3] = "小船在码头*岸。"captionTxt[4] = "水底世界鲸鱼壁画。"captionTxt[5] = "海中小岛或者是岩石。"}步骤五将这里所示的程序代码贴到你网页中的HTML文件，位置就在JavaScript的说明文字下。因为Navigator 4.0和IE 4.0以不同的方式解读CSS，我们的script就使用对象检测（object detection）来决定呈现的模式。如果呈现的模式是Navigator，它还是可以定义某些特定的对象，使得IE程序代码还是有作用。另外这也是整个程序代码的结尾，所以一定要以</SCRIPT>标签来作结束：function setUp() {if (!document.all) {document.all = document;for (i=1;i<=numSlides;i++) document.all[("image"+i)].style=document.all[("image"+i)];}switchSlide(1);}function switchSlide(sDir) {newSlide = currentSlide + sDir;if (!newSlide) newSlide=numSlides;if (newSlide > numSlides) newSlide=1;document.all[("image"+newSlide)].style.visibility="visible";document.all[("image"+currentSlide)].style.visibility="hidden";// 如果不要说明文字，请移除下一行:document.all["captions"].document.forCaptions.captionsText.value=captionTxt[newSlide];currentSlide = newSlide;}//--></script> 注意那些*近程序代码结尾的注解：如果你没有说明文字，那么就将它下面一行的文字移除。步骤六以</HEAD>关闭页首标签，然后将下列的程序代码，贴到网页HTML文件中的body部分。注意，程序代码以个别的<DIV>标签区分每个影像，他们和正规的<IMG src>格式有关联：<BODY onLoad="setUp()"><B> Builder.com slide show!</B><DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV><DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV><DIV id="image3" class="slides"><IMG src="third.jpg"></DIV><DIV id="image2" class="slides"><IMG src="second.jpg"></DIV><DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>步骤七观众必须以自己的步调来点按幻灯片，所以你得提供他们点按的东西。。你可以使用简单老式的超链接，但是若有特殊的Previous和Next的GIF点选按钮，就精巧多了。样本程序代码是使用一个table来连接next.gif和previuos.gif：<DIV style="position:absolute; top:350px; left:100px"><A href="javascript :switchSlide(-1)"><IMG src="previous.gif" border=0></A><A href="javascript :switchSlide(1)"><IMG src="next.gif" border=0></A></DIV>如果你不想用GIF文件来作Previous和Next点选按钮，用文字取代上面的<IMG>标签。步骤八最后，在<TEXTAREA>输入欲显现的说明文字。你可以随意决定<TEXTAREA>的尺寸大小，只要改变rows=和cols=的数字即可。以下是程序代码：<DIV id="captions" style="position:absolute; left: 320px; top:75px"><B>Picture caption</B><FORM name=forCaptions><TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA></FORM></DIV>

http://myjs.chinaz.com/看看这个网站知直接从上面下个道，换成自己的图片就可内以上面各种展示效果容都有

必须先弄一个PPT再载到网上桌面，并点击，在网页上显示的话，得上传才可以，必须是事先下好的，才行本回答由网友推荐

jquery图片轮播效果。去搜，大把

没做过呢

应该要用附件功能，但是不能直接查看，需要下载。更多追问追答 追问有无什么附件能实现此功能，劳驾帮忙考虑一下，谢谢了追答好像还真没有，除非是百度文库可以直接显示。追问谢谢，百度文库的直接显示是如何实现的呢？或者说需要在网站的后台做什么呢？如果把PPT转成FLASH的.swf文件能否？如何在文章系统发布？如下图所示，追答百度文库就是一款直接显示各种文档的网站，你只要把文件放进去就行了，另外要注册百度账号（废话）。把ppt转成flash的话，flash文件里因该有转换的按钮，具体不太清楚，不过你要转flash干嘛？ppt是多媒体，flash是动画，两个根本性质都不一样啊！本回答由提问者推荐

做附件吧，没有这个功能吧更多追问追答 追问有无什么附件能实现此功能，劳驾帮忙考虑一下，谢谢了追答这个不知道了，一般邮箱里有直接打开的功能，附件只是作为文件形式存在啊追问如果把PPT转成FLASH的.swf文件能否？如何在文章系统发布？如下图所示，追答转FLASH可以加进去，但具体操作，我也不熟悉

这个简单打开想要图片轮播的PPT，采取以下方法：点击左侧图片，一次多选几张图片，然后点击图片——右键——幻灯片切换——效果选择“随机”、慢速、每隔8秒。

　　设置好图片切换的时间就可以了。　　第一步，先选择好图片，依次插入到幻灯片中。一般建议一个ppt幻灯片插入一张图片zhidao，也可版以一个幻灯片插入几张图片，然后设置先后显示的时间　　第二步，设置图片显示的动画效果　　第三步，设置图片显示的时间，第二张幻灯片显示的时间要跟第一张连起来，选中图片，点击【计时】，设置切换的时间　　第四步，设置好时权间后，点击幻灯片放映，观看效果　　

设置成自动播放或者把图片动作路径做成飞入（飞出）本回答被提问者和网友采纳

版权属于: CTM教育PPT网

原文地址: http://www.ctmedu.cn/78451.html

转载时必须以链接形式注明原始出处及本声明。