html幻灯片效果代码，html5控件代码大全

编程之家2026-06-15817次浏览

大家好，html幻灯片效果代码相信很多的网友都不是很明白，包括html5控件代码大全也是一样，不过没有关系，接下来就来为大家分享关于html幻灯片效果代码和html5控件代码大全的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

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

用JS（JavaScript）+CSS或Applet做的；

不用什么软件。

透明渐变轮番显示

制作方法：

在<head>标签下，粘贴代码：

//设置轮番显示速度 Set slideShowSpeed(milliseconds)

var slideShowSpeed= 5000;

//匀滑转换时间 Duration of crossfade(seconds)

var crossFadeDuration= 3;

//指定图像文件 Specify the image files

var Pic= new Array();

// to add more images, just continue

// the pattern, adding to the array below

Pic[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 line

var 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：

将表格单元格设置名称“id=VU”：

在<img>中加入代码：<img src="1.jpg" name='SlideShow'>

至此，我们的效果便制作好了。

制作方法：

1.在<head>中插入代码：

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-

}

else

document.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)'

参考图片代码：

制作完成。

观看效果

使用CSS中的revealTrans滤镜制作超弦图片的播放

CSS中有revealTrans滤镜（具体介绍请参看巧用CSS的 RevealTrans滤镜），也曾用该滤镜制作过各种图片播放的效果（类似于使用CSS滤镜revealTrans制作图片渐显效果）。知道其在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。

实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。

制作方法：

1、在<head>中插入JS代码：

function reapply(){

setTimeout("slideit()",800)

return true

}

window.onerror=reapply

</SCRIPT>

<!--

//preload images

var image1=new Image()

image1.src="images/01.jpg"

var image2=new Image()

image2.src="images/02.jpg"

var image3=new Image()

image3.src="images/03.jpg"

var image4=new Image()

image4.src="images/04.jpg"

var image5=new Image()

image5.src="images/05.jpg"

var image6=new Image()

image6.src="images/06.jpg"

var image7=new Image()

image7.src="images/07.jpg"

var image8=new Image()

image8.src="images/08.jpg"

var image9=new Image()

image9.src="images/09.jpg"

//-->

</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 rel="external nofollow" href="javascript:slidelink()">

5、加入代码：

<!--

////change number of images below

var number_of_images=9

//change speed below(in seconds)

var speed=3

var step=1

var whichimage=1

function slideit(){

if(!document.images)

return

if(document.all)

slide.filters.item(0).Apply()

document.images.slide.src=eval("image"+step+".src")

if(document.all)

slide.filters.item(0).Play()

whichimage=step

if(step<number_of_images)

step++

else

step=1

if(document.all)

setTimeout("slideit()",speed*1000+3000)

else

setTimeout("slideit()",speed*1000)

}

function slidelink(){

if(whichimage==1)

top.location.rel="external nofollow" href="/index.html"

if(whichimage==2)

top.location.rel="external nofollow" href="/news.html"

if(whichimage==3)

top.location.rel="external nofollow" href="/game.html"

if(whichimage==4)

top.location.rel="external nofollow" href="/music.html"

if(whichimage==5)

top.location.rel="external nofollow" href="/sport.html"

if(whichimage==6)

top.location.rel="external nofollow" href="/radio.html"

if(whichimage==7)

top.location.rel="external nofollow" href="/travel.html"

if(whichimage==8)

top.location.rel="external nofollow" href="/card.jsp"

else if(whichimage==9)

top.location.rel="external nofollow" href="/study.html"

}

</SCRIPT>

其中：各链接地址相对应<head>中插入的JS代码中的图片。

注意，页面地址必须与图片张数相对应。本教学使用九张图片，相应就放置九个超链接地址。

DHTML幻灯片播放程序

这是一个幻灯片播放程序，也就是一图片轮流播放的程序。我们在一些站点上可以看见这种形式的广告播放条，大多是用CGI做的，也就是要服务器端支持CGI程序，如ASP、PHP、 Perl等。但我们这里的实现方法无需CGI，用的仅是CSS的效果，再加上JavaScripts的控制。只要你的浏览器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不过在这里我们用到了CSS的Filter滤镜效果，该效果只能在IE中出现。有关CSS的Filter滤镜效果，大家可以参看我的《CSS中Filter滤镜详解》，该文章在Yesky.com上已经发表。好了，让我们来做点准备工作吧。

首先，为了制作这个效果，我们首先要打几个尺寸一样大小的图片，让其轮流播放。比如，我找了下面三个88x31的图片做为所用的的图片。

其次，让我们再来复习一下CSS中Filter的图片转换滤镜的知识：

CSS中的显示转换滤镜

显示转换滤镜提供的是一种更为多变的转换效果，它不像混合转换滤镜，只提供一种淡入淡出的效果，它还提供了更多的图片转换效果，它的语法是：

Filter: RevealTrans( duration=转换的秒数，transition=转换类型)

大家可以看见，它有一个转换类型的参数，这里，它提供了24种转换类型，我们只需指定转换类型的代号，就可以让图片按特有的转换效果进行转换。下表就是24种转换滤镜的形式及其对应的代号：

动态转换滤镜的属性、方法和事件

属性名说明取值

duration图像转换的延迟时间，最小单位是毫秒，也就是小数点后第三位。单位是秒，取值自然数

enabled指定是否应用滤镜效果 0表示不应用，非0表示就用。

staus传回一个转换状态 0表示转换停止

1表示显示应用的转换滤镜

2表示正在转换中

方法名说明

Apply将滤镜应用到对象上

Play开始转换

Stop停止转换

事件名说明

OnFilterChange当滤镜转变发生改变或是滤镜完成时所触发的事件

上面的CSS的转换滤镜如何被JavaScripts调用的知识我没有过多的说明，我只是列举了他的属性方法和事件。在后面，我们用 Javascript来控制他的时候，我会告诉大家如何用JavaScripts使其工作的。当然这些滤镜只能在IE4.0中浏览，NetScape不支持，不过，这并不影响netscape中的显示，只不过Netscape中不会出现图片转换的效果了。

下面，我要开始最为核心的部分了，就是编写javascript程序了。我们的思路是，可以定义一组图片（若干张），当页面出现时先显示第一张图片，并预载入第二张图片，第一张图片载入后5秒钟，如果第二张图片也载入了，我们就开始自动切换到第二张图片，此时并预载入第三张图片，如果5秒钟内我们载入了第三张图片，就自动切换到第三张图片，如此播放下去直到最后一张又从头开始。当然，这是自动播放的了。我们还允许用户手动进行向前和向后的播放。

首先，我们要解决的问题是图片的预载入，因为这决定了切换过程的流畅性和播放过程的完美性。要预载入一幅图片很简单，我们只要在内存中新建一个图片的实例变量，并把该变量指向一幅图片，这样，我们的浏览器便会自动载入这幅图片的，这就是图片的预载入。用javascript写出来就是下面这个样子：

var myImage= new Image()

myImage.src="someImage.gif"

然后，我们还要知道，图片是否载入了吗？如果载入了，我们就显示，如果没载入，那么就要出错了。于是我们还要改一下上面的代码，在其中加入两条语句，所以，这段JavaScript就变成下面的样子了：

var img= new Image()

img.onload= doReadyImage

img.onerror= doErrorDisplay

img.src="someImage.gif"

我们加入了图片的onload和onerror事件，分别代表是否预载和预载出错的事件。这两条句语必需在img.src语句的前面。否则的话，图片预载就会出错。

最后就是我们的图片切换程序了，在前面，我们复习了CSS中Filter转换滤镜的各种效果，这里我们用代号为23的随机效果，下面，是我们为在IE中这种效果所写的JavaScript程序：

if(document.images.slideShow.filters)

{

document.images.slideShow.filters[0].Stop()

document.images.slideShow.filters[0].Apply()

//使用随机的转换效果

document.images.slideShow.filters.revealTrans.transition=23

}

document.images.slideShow.src= sSource

//开始进行转换效果的执行

if(document.images.slideShow.filters)

document.images.slideShow.filters[0].Play()

任何人都能将假期的照片放在自己的网站上，但只有最酷的网络构建者会将他们设计成一场幻灯片秀。而且还不是那种简单的一张照片一个HTML页面的幻灯片，而是一个真正有动态感的幻灯片秀，每一个影像都下载到同一个HTML页面去。我们会教你如何使用Dynamic HTML(DHTML)和Cascading Style Sheets(CSS)去构建专属你个人的幻灯片秀，让你的朋友、家人和同事觉得更无聊，喔不！是印象更深刻。但是记住！因为这种幻灯片秀是用DHTML写的，因此它只能在4.0或以上更新的浏览器版本才能看得到。

当然喽，这种幻灯片秀也有严肃的用途。只是我们现在还没有想到而已。

步骤一

收集你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，对观众而言会造成视觉上的不和谐。

步骤二

在你的页首标签里，你首先要做的，就是在<STYLE>标签里指出使用的是CSS。在<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>格式有关联：

<B> Builder.com slide show!</B>

步骤七

观众必须以自己的步调来点按幻灯片，所以你得提供他们点按的东西。。你可以使用简单老式的超链接，但是若有特殊的Previous和Next的GIF点选按钮，就精巧多了。样本程序代码是使用一个table来连接next.gif和previuos.gif：

</DIV>

如果你不想用GIF文件来作Previous和Next点选按钮，用文字取代上面的<IMG>标签。

步骤八

最后，在<TEXTAREA>输入欲显现的说明文字。你可以随意决定<TEXTAREA>的尺寸大小，只要改变rows=和cols=的数字即可。以下是程序代码：

<B>Picture caption</B>

</FORM>

</DIV>

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所示。

本例中做好的播放器，可在下列地址浏览：。进一步，为了让播放器更加生动，你可以同时给幻灯片的播放加上声音。

若要把这个播放器放到网上，同时图片总容量超过150K，可以给页面作一个“Loading（加载）层”，待全部内容下载完毕后，才显示出来。以免由于图片未下载完而产生播放不畅的感觉。关于“Loading”层的制作方法，在很多地方有介绍，这里就不再详述了。

把这个例子变通一下，我们可以作一个相册。你可以把你的家庭或女朋友的相片加在幻灯片所在的时间链上，并且加上Last（上一张）、 Next（下一张）等按钮，便于浏览者逐张欣赏。若觉得相片太小不能看清楚细节，你还可以加一个Zoom In（放大）按钮，链接到一个有单张放大相片的新窗口页面。最后把它放到网上，相信一定会给你的家人或女朋友带去一份惊喜。

如何用用flash做幻灯片效果,求详细过程。

好把步骤给你讲的细一点，不是从网上粘贴的，是我经过一个多小时做好，又把步骤写出来的，希望你能成功

第一步

1、新建flash文档

2、文件--导入--导入到库，导入四张图片

3、在图层一第一帧，从库里拉入一张图片到舞台，调整到适当大小，右键转换为元件---元件类型选影片剪辑，名称为pic1；在图层一第三十帧插入空白关键帧，从库里拉入第二张图片到舞台，调整到适当大小，右键转换为元件---元件类型选影片剪辑，名称为pic2；在图层一第六十帧插入空白关键帧，从库里拉入第三张图片到舞台，调整到适当大小，右键转换为元件---元件类型选影片剪辑，名称为pic3；在图层一第九十帧插入空白关键帧，从库里拉入第四张图片到舞台，调整到适当大小，右键转换为元件---元件类型选影片剪辑，名称为pic4；在图层一第一百二十帧插入帧。

第二步

4、新建图层（图层二）

5、用矩形工具，在舞台画一个矩形（图片序号背景那个矩形），选中矩形右键，转换为元件---元件类型选影片剪辑，名称为n1，影片剪辑实例名也为n1；使用同样的办法分别在舞台绘制出n2、n3、n4四个影片剪辑元件，并把他们按照顺序排好。

6、点击第一帧，添加帧标签为pic1；在第三十帧插入关键帧，添加帧标签为pic2；在第六十帧插入关键帧，添加帧标签为pic3；在第九十帧插入关键帧，添加帧标签为pic4；在第一百二十帧插入帧。

7、在第一帧，点击n1，设置属性颜色选择色调为红色；在第三十帧，点击n2，设置属性颜色选择色调为红色；在第六十帧，点击n3，设置属性颜色选择色调为红色；在第九十帧，点击n4，设置属性颜色选择色调为红色。

第三步

8、新建图层（图层三）

9、在第一帧，对应图层二的四个矩形框上方分别输入1、2、3、4

10、在第一百二十帧插入帧。

第四步

11、新建图层（图层四）

12.点击第一帧，右键---动作，在动作面板中输入如下代码：

n1.useHandCursor=false

n2.useHandCursor=false

n3.useHandCursor=false

n4.useHandCursor=false

n1.onRelease= function(){

gotoAndPlay("pic1");

};

n2.onRelease= function(){

gotoAndPlay("pic2");

};

n3.onRelease= function(){

gotoAndPlay("pic3");

};

n4.onRelease= function(){

gotoAndPlay("pic4");

};

12、在第一百二十帧插入帧。

至此全部结束，控制---测试影片看看效果

关于html幻灯片效果代码到此分享完毕，希望能帮助到您。

收集魔网能量(魔网能量有什么用)lol怎么观战不了？lol观战没有反应的解决方法