javascript幻灯片，javascript中文文档下载

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

各位老铁们，大家好，今天由我来为大家分享javascript幻灯片，以及javascript中文文档下载的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

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

用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>

<大虾进> javascript常用脚本代码有那些呀

适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人

基础知识：HTML

JavaScript就这么回事1：基础知识

1创建脚本块

1:<script language=”JavaScript”>

2: JavaScript code goes here

3:</script>

2隐藏脚本代码

1:<script language=”JavaScript”>

2:<!--

3: document.write(“Hello”);

4://-->

5:</script>

在不支持JavaScript的浏览器中将不执行相关代码

3浏览器不支持的时候显示

1:<noscript>

2: Hello to the non-JavaScript browser.

3:</noscript>

4链接外部脚本文件

1:<script language=”JavaScript” src="/”filename.js"”></script>

5注释脚本

1:// This is a comment

2: document.write(“Hello”);// This is a comment

3:/*

4: All of this

5: is a comment

6:*/

6输出到浏览器

1: document.write(“<strong>Hello</strong>”);

7定义变量

1: var myVariable=“some value”;

8字符串相加

1: var myString=“String1”+“String2”;

9字符串搜索

1:<script language=”JavaScript”>

2:<!--

3: var myVariable=“Hello there”;

4: var therePlace= myVariable.search(“there”);

5: document.write(therePlace);

6://-->

7:</script>

10字符串替换

1: thisVar.replace(“Monday”,”Friday”);

11格式化字串

1:<script language=”JavaScript”>

2:<!--

3: var myVariable=“Hello there”;

4: document.write(myVariable.big()+“<br/>”);

5: document.write(myVariable.blink()+“<br/>”);

6: document.write(myVariable.bold()+“<br/>”);

7: document.write(myVariable.fixed()+“<br/>”);

8: document.write(myVariable.fontcolor(“red”)+“<br/>”);

9: document.write(myVariable.fontsize(“18pt”)+“<br/>”);

10: document.write(myVariable.italics()+“<br/>”);

11: document.write(myVariable.small()+“<br/>”);

12: document.write(myVariable.strike()+“<br/>”);

13: document.write(myVariable.sub()+“<br/>”);

14: document.write(myVariable.sup()+“<br/>”);

15: document.write(myVariable.toLowerCase()+“<br/>”);

16: document.write(myVariable.toUpperCase()+“<br/>”);

17:

18: var firstString=“My String”;

19: var finalString= firstString.bold().toLowerCase().fontcolor(“red”);

20://-->

21:</script>

12创建数组

1:<script language=”JavaScript”>

2:<!--

3: var myArray= new Array(5);

4: myArray[0]=“First Entry”;

5: myArray[1]=“Second Entry”;

6: myArray[2]=“Third Entry”;

7: myArray[3]=“Fourth Entry”;

8: myArray[4]=“Fifth Entry”;

9: var anotherArray= new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);

10://-->

11:</script>

13数组排序

1:<script language=”JavaScript”>

2:<!--

3: var myArray= new Array(5);

4: myArray[0]=“z”;

5: myArray[1]=“c”;

6: myArray[2]=“d”;

7: myArray[3]=“a”;

8: myArray[4]=“q”;

9: document.write(myArray.sort());

10://-->

11:</script>

14分割字符串

1:<script language=”JavaScript”>

2:<!--

3: var myVariable=“a,b,c,d”;

4: var stringArray= myVariable.split(“,”);

5: document.write(stringArray[0]);

6: document.write(stringArray[1]);

7: document.write(stringArray[2]);

8: document.write(stringArray[3]);

9://-->

10:</script>

15弹出警告信息

1:<script language=”JavaScript”>

2:<!--

3: window.alert(“Hello”);

4://-->

5:</script>

16弹出确认框

1:<script language=”JavaScript”>

2:<!--

3: var result= window.confirm(“Click OK to continue”);

4://-->

5:</script>

17定义函数

1:<script language=”JavaScript”>

2:<!--

3: function multiple(number1,number2){

4: var result= number1* number2;

5: return result;

6:}

7://-->

8:</script>

18调用JS函数

1:<a href=”#” onClick=”functionName()”>Link text</a>

2:<a rel="external nofollow" href="/”javascript:functionName"()”>Link text</a>

19在页面加载完成后执行函数

1:<body onLoad=”functionName();”>

2: Body of the page

3:</body>

20条件判断

1:<script>

2:<!--

3: var userChoice= window.confirm(“Choose OK or Cancel”);

4: var result=(userChoice== true)?“OK”:“Cancel”;

5: document.write(result);

6://-->

7:</script>

21指定次数循环

1:<script>

2:<!--

3: var myArray= new Array(3);

4: myArray[0]=“Item 0”;

5: myArray[1]=“Item 1”;

6: myArray[2]=“Item 2”;

7: for(i= 0; i< myArray.length; i++){

8: document.write(myArray[i]+“<br/>”);

9:}

10://-->

11:</script>

22设定将来执行

1:<script>

2:<!--

3: function hello(){

4: window.alert(“Hello”);

5:}

6: window.setTimeout(“hello()”,5000);

7://-->

8:</script>

23定时执行函数

1:<script>

2:<!--

3: function hello(){

4: window.alert(“Hello”);

5: window.setTimeout(“hello()”,5000);

6:}

7: window.setTimeout(“hello()”,5000);

8://-->

9:</script>

24取消定时执行

1:<script>

2:<!--

3: function hello(){

4: window.alert(“Hello”);

5:}

6: var myTimeout= window.setTimeout(“hello()”,5000);

7: window.clearTimeout(myTimeout);

8://-->

9:</script>

25在页面卸载时候执行函数

1:<body onUnload=”functionName();”>

2: Body of the page

3:</body>

JavaScript就这么回事2：浏览器输出

26访问document对象

1:<script language=”JavaScript”>

2: var myURL= document.URL;

3: window.alert(myURL);

4:</script>

27动态输出HTML

1:<script language=”JavaScript”>

2: document.write(“<p>Here’s some information about this document:</p>”);

3: document.write(“<ul>”);

4: document.write(“<li>Referring Document:“+ document.referrer+“</li>”);

5: document.write(“<li>Domain:“+ document.domain+“</li>”);

6: document.write(“<li>URL:“+ document.URL+“</li>”);

7: document.write(“</ul>”);

8:</script>

28输出换行

1: document.writeln(“<strong>a</strong>”);

2: document.writeln(“b”);

29输出日期

1:<script language=”JavaScript”>

2: var thisDate= new Date();

3: document.write(thisDate.toString());

4:</script>

30指定日期的时区

1:<script language=”JavaScript”>

2: var myOffset=-2;

3: var currentDate= new Date();

4: var userOffset= currentDate.getTimezoneOffset()/60;

5: var timeZoneDifference= userOffset- myOffset;

6: currentDate.setHours(currentDate.getHours()+ timeZoneDifference);

7: document.write(“The time and date in Central Europe is:“+ currentDate.toLocaleString());

8:</script>

31设置日期输出格式

1:<script language=”JavaScript”>

2: var thisDate= new Date();

3: var thisTimeString= thisDate.getHours()+“:”+ thisDate.getMinutes();

4: var thisDateString= thisDate.getFullYear()+“/”+ thisDate.getMonth()+“/”+ thisDate.getDate();

5: document.write(thisTimeString+“ on“+ thisDateString);

6:</script>

32读取URL参数

1:<script language=”JavaScript”>

2: var urlParts= document.URL.split(“?”);

3: var parameterParts= urlParts[1].split(“&”);

4: for(i= 0; i< parameterParts.length; i++){

5: var pairParts= parameterParts[i].split(“=”);

6: var pairName= pairParts[0];

7: var pairValue= pairParts[1];

8: document.write(pairName+“：“+pairValue);

9:}

10:</script>

你还以为HTML是无状态的么？

33打开一个新的document对象

1:<script language=”JavaScript”>

2: function newDocument(){

3: document.open();

4: document.write(“<p>This is a New Document.</p>”);

5: document.close();

6:}

7:</script>

34页面跳转

1:<script language=”JavaScript”>

2: window.location=“”;

3:</script>

35添加网页加载进度窗口

1:<html>

2:<head>

3:<script language='javaScript'>

4: var placeHolder= window.open('holder.html','placeholder','width=200,height=200');

5:</script>

6:<title>The Main Page</title>

7:</head>

8:<body onLoad='placeHolder.close()'>

9:<p>This is the main page</p>

10:</body>

11:</html>

36读取图像属性

1:<img src="/”image1.jpg"” name=”myImage”>

2:<a href=”#” onClick=”window.alert(document.myImage.width)”>Width</a>

37动态加载图像

1:<script language=”JavaScript”>

2: myImage= new Image;

3: myImage.src=“Tellers1.jpg”;

4:</script>

38简单的图像替换

1:<script language=”JavaScript”>

2: rollImage= new Image;

3: rollImage.src=“rollImage1.jpg”;

4: defaultImage= new Image;

5: defaultImage.src=“image1.jpg”;

6:</script>

7:<a rel="external nofollow" href="/”myUrl"” onMouseOver=”document.myImage.src= rollImage.src;”

8: onMouseOut=”document.myImage.src= defaultImage.src;”>

9:<img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0>

39随机显示图像

1:<script language=”JavaScript”>

2: var imageList= new Array;

3: imageList[0]=“image1.jpg”;

4: imageList[1]=“image2.jpg”;

5: imageList[2]=“image3.jpg”;

6: imageList[3]=“image4.jpg”;

7: var imageChoice= Math.floor(Math.random()* imageList.length);

8: document.write(‘<img src=”’+ imageList[imageChoice]+‘“>’);

9:</script>

40函数实现的图像替换

1:<script language=”JavaScript”>

2: var source= 0;

3: var replacement= 1;

4: function createRollOver(originalImage,replacementImage){

5: var imageArray= new Array;

6: imageArray[source]= new Image;

7: imageArray[source].src= originalImage;

8: imageArray[replacement]= new Image;

9: imageArray[replacement].src= replacementImage;

10: return imageArray;

11:}

12: var rollImage1= createRollOver(“image1.jpg”,”rollImage1.jpg”);

13:</script>

14:<a href=”#” onMouseOver=”document.myImage1.src= rollImage1[replacement].src;”

15: onMouseOut=”document.myImage1.src= rollImage1[source].src;”>

16:<img src="/”image1.jpg"” width=100 name=”myImage1” border=0>

17:</a>

41创建幻灯片

1:<script language=”JavaScript”>

2: var imageList= new Array;

3: imageList[0]= new Image;

4: imageList[0].src=“image1.jpg”;

5: imageList[1]= new Image;

6: imageList[1].src=“image2.jpg”;

7: imageList[2]= new Image;

8: imageList[2].src=“image3.jpg”;

9: imageList[3]= new Image;

10: imageList[3].src=“image4.jpg”;

11: function slideShow(imageNumber){

12: document.slideShow.src= imageList[imageNumber].src;

13: imageNumber+= 1;

14: if(imageNumber< imageList.length){

15: window.setTimeout(“slideShow(“+ imageNumber+“)”,3000);

16:}

17:}

18:</script>

19:</head>

20:<body onLoad=”slideShow(0)”>

21:<img src="/”image1.jpg"” width=100 name=”slideShow”>

42随机广告图片

1:<script language=”JavaScript”>

2: var imageList= new Array;

3: imageList[0]=“image1.jpg”;

4: imageList[1]=“image2.jpg”;

5: imageList[2]=“image3.jpg”;

6: imageList[3]=“image4.jpg”;

7: var urlList= new Array;

8: urlList[0]=“”;

9: urlList[1]=“”;

10: urlList[2]=“”;

11: urlList[3]=“”;

12: var imageChoice= Math.floor(Math.random()* imageList.length);

13: document.write(‘<a href=”’+ urlList[imageChoice]+‘“><img src=”’+ imageList[imageChoice]+‘“></a>’);

14:</script>

JavaScript就这么回事4：表单

还是先继续写完JS就这么回事系列吧～

43表单构成

1:<form method=”post” action=”target.html” name=”thisForm”>

2:<input type=”text” name=”myText”>

3:<select name=”mySelect”>

4:<option value=”1”>First Choice</option>

5:<option value=”2”>Second Choice</option>

6:</select>

7:<br/>

8:<input type=”submit” value=”Submit Me”>

9:</form>

44访问表单中的文本框内容

1:<form name=”myForm”>

2:<input type=”text” name=”myText”>

3:</form>

4:<a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

45动态复制文本框内容

1:<form name=”myForm”>

2: Enter some Text:<input type=”text” name=”myText”><br/>

3: Copy Text:<input type=”text” name=”copyText”>

4:</form>

5:<a href=”#” onClick=”document.myForm.copyText.value=

6: document.myForm.myText.value;”>Copy Text Field</a>

46侦测文本框的变化

1:<form name=”myForm”>

2: Enter some Text:<input type=”text” name=”myText” onChange=”alert(this.value);”>

3:</form>

47访问选中的Select

1:<form name=”myForm”>

2:<select name=”mySelect”>

3:<option value=”First Choice”>1</option>

4:<option value=”Second Choice”>2</option>

5:<option value=”Third Choice”>3</option>

6:</select>

7:</form>

8:<a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

48动态增加Select项

1:<form name=”myForm”>

2:<select name=”mySelect”>

3:<option value=”First Choice”>1</option>

4:<option value=”Second Choice”>2</option>

5:</select>

6:</form>

7:<script language=”JavaScript”>

8: document.myForm.mySelect.length++;

9: document.myForm.mySelect.options[document.myForm.mySelect.length- 1].text=“3”;

10: document.myForm.mySelect.options[document.myForm.mySelect.length- 1].value=“Third Choice”;

11:</script>

49验证表单字段

1:<script language=”JavaScript”>

2: function checkField(field){

3: if(field.value==“”){

4: window.alert(“You must enter a value in the field”);

5: field.focus();

6:}

7:}

8:</script>

9:<form name=”myForm” action=”target.html”>

10: Text Field:<input type=”text” name=”myField”onBlur=”checkField(this)”>

11:<br/><input type=”submit”>

12:</form>

50验证Select项

1: function checkList(selection){

2: if(selection.length== 0){

3: window.alert(“You must make a selection from the list.”);

4: return false;

5:}

6: return true;

7:}

51动态改变表单的action

1:<form name=”myForm” action=”login.html”>

2: Username:<input type=”text” name=”username”><br/>

3: Password:<input type=”password” name=”password”><br/>

4:<input type=”button” value=”Login” onClick=”this.form.submit();”>

5:<input type=”button” value=”Register” onClick=”this.form.action=‘register.html’; this.form.submit();”>

6:<input type=”button” value=”Retrieve Password” onClick=”this.form.action=‘password.html’; this.form.submit();”>

7:</form>

52使用图像按钮

1:<form name=”myForm” action=”login.html”>

2: Username:<input type=”text” name=”username”><br/>

3: Password:<input type=”password”name=”password”><br/>

4:<input type=”image” src="/”login.gif"” value=”Login”>

5:</form>

53表单数据的加密

1:<SCRIPT LANGUAGE='JavaScript'>

2:<!--

3: function encrypt(item){

4: var newItem='';

5: for(i=0; i< item.length; i++){

6: newItem+= item.charCodeAt(i)+'.';

7:}

8: return newItem;

9:}

10: function encryptForm(myForm){

11: for(i=0; i< myForm.elements.length; i++){

12: myForm.elements[i].value= encrypt(myForm.elements[i].value);

13:}

14:}

15:

16://-->

17:</SCRIPT>

18:<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>

19: Enter Some Text:<input type=text name=myField><input type=submit>

20:</form>

JavaScript就这么回事5：窗口和框架

54改变浏览器状态栏文字提示

1:<script language=”JavaScript”>

2: window.status=“A new status message”;

3:</script>

55弹出确认提示框

1:<script language=”JavaScript”>

2: var userChoice= window.confirm(“Click OK or Cancel”);

3: if(userChoice){

4: document.write(“You chose OK”);

5:} else{

6: document.write(“You chose Cancel”);

7:}

8:</script>

56提示输入

1:<script language=”JavaScript”>

2: var userName= window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);

3: document.write(“Your Name is“+ userName);

4:</script>

57打开一个新窗口

1://打开一个名称为myNewWindow的浏览器新窗口

2:<script language=”JavaScript”>

3: window.open(“”,”myNewWindow”);

4:</script>

58设置新窗口的大小

1:<script language=”JavaScript”>

2: window.open(“”,”myNewWindow”,'height=300,width=300');

3:</script>

59设置新窗口的位置

1:<script language=”JavaScript”>

2: window.open(“”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');

3:</script>

60是否显示工具栏和滚动栏

1:<script language=”JavaScript”>

2: window.open(“http:

61是否可以缩放新窗口的大小

1:<script language=”JavaScript”>

2: window.open(';);</script>

62加载一个新的文档到当前窗口

1:<a href='#' onClick='document.location='125a.html';'>Open New Document</a>

63设置页面的滚动位置

1:<script language=”JavaScript”>

2: if(document.all){//如果是IE浏览器则使用scrollTop属性

3: document.body.scrollTop= 200;

4:} else{//如果是NetScape浏览器则使用pageYOffset属性

5: window.pageYOffset= 200;

6:}</script>

64在IE中打开全屏窗口

1:<a href='#' onClick=”window.open(';);”>Open a full-screen window</a>

65新窗口和父窗口的操作

1:<script language=”JavaScript”>

2://定义新窗口

3: var newWindow= window.open(“128a.html”,”newWindow”);

4: newWindow.close();//在父窗口中关闭打开的新窗口

5:</script>

6:在新窗口中关闭父窗口

7: window.opener.close()

66往新窗口中写内容

1:<script language=”JavaScript”>

2: var newWindow= window.open(“”,”newWindow”);

3: newWindow.document.open();

4: newWindow.document.write(“This is a new window”);

5: newWIndow.document.close();

6:</script>

67加载页面到框架页面

1:<frameset cols=”50%,*”>

2:<frame name=”frame1” src="/”135a.html"”>

3:<frame name=”frame2” src="/”about:blank"”>

4:</frameset>

5:在frame1中加载frame2中的页面

6: parent.frame2.document.location=“135b.html”;

68在框架页面之间共享脚本

如果在frame1中html文件中有个脚本

1: function doAlert(){

2: window.alert(“Frame 1 is loaded”);

3:}

那么在frame2中可以如此调用该方法

1:<body onLoad=”parent.frame1.doAlert();”>

2: This is frame 2.

3:</body>

69数据公用

可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用

1:<script language=”JavaScript”>

2: var persistentVariable=“This is a persistent value”;

3:</script>

4:<frameset cols=”50%,*”>

5:<frame name=”frame1” src="/”138a.html"”>

6:<frame name=”frame2” src="/”138b.html"”>

7:</frameset>

这样在frame1和frame2中都可以使用变量persistentVariable

70框架代码库

根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1:<frameset cols=”0,50%,*”>

2:<frame name=”codeFrame” src="/”140code.html"”>

3:<frame name=”frame1” src="/”140a.html"”>

4:<frame name=”frame2” src="/”140b.html"”>

5:</frameset>

phpcms首页幻灯片怎么弄

网页链接

添加个 phpcmsv9幻灯片管理模块

幻灯片管理模块简介：

1、可创建多个位置，一个网站多个幻灯处调用互不影响。

2、独立模块，不修改系统内核，不用担心升级问题。

3、标签调用灵活。

安装：

1、复制本目录下面的phpcms目录到你的V9根目录下面即可。

2、进入后台模块管理中，找到【幻灯片管理】，点击【安装】，安装完毕后就可以使用了。

使用：

1.安装完后，找到【内容】-【幻灯片管理】。

2.先添加一个位置，比如：【首页导航下方幻灯】，这个位置的名字你可以自己随便起。一个网站可以添加多个位置，根据你自己需求来添加。

3.接下来，就可以添加幻灯片了。点击【添加幻灯片】按钮。在弹出的窗口中填入相关信息。

4.若多个，以此类推添加即可。

前台模板标签调用：{pc:slider action="lists" postion="54" siteid="$siteid" order="desc" num="4"}

{loop$data$r}

<p>排序编号：{$r[listorder]}</p>

<p>图片：{$r[image]}</p>

<hr/>

{/loop}

{/pc}

标签说明：

action显示记录，这个是固定的。

postion是指位置ID，ID在后台幻灯片管理中可见位置ID。

order是幻灯的排序，DESC降序，ASC升序排序。

num条数

支持的全部标签：

id,幻灯记录的ID

typeid,幻灯记录所属位置ID

siteid,站点ID

name,记录的标题或者描述

listorder,排序

url,幻灯的链接地址

image,幻灯的上传图片地址

addtime,添加时间，如果在标签中调用，使用:{date("Y-m-d H:m:s",$r[addtime])}

isshow,是否显示，1为显示，0为不显示。

关于javascript幻灯片到此分享完毕，希望能帮助到您。

调试js代码，网页js代码追随者利奥拉捷拉奥拉