网页中实现运行幻灯片功能示例

网页中实现运行幻灯片功能示例

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

在网页中实现运行幻灯片功能，有助于客户快速的点击，更新的目录。如下图效果

新建一个txt文本文档，重命名为1.js文件

JS文件即将Javascript脚本放入一个文件类并以js扩展名命名一种文本脚本，如CSS 文件一样被放入一个文件内。可以说JS文件是网页Java Script客户端脚本文件。

一般JS文件可以使用记事本打开 方法-->桌面右击鼠标-->打开方式-->记事本 ，打开后，写入如下代码：

var widths=262;

var heights=206;

var counts=6;

img1=new Image ();img1.src='./20.jpg';

img2=new Image ();img2.src='./21.jpg';

img3=new Image ();img3.src='./2.jpg';

img4=new Image ();img4.src='./2.jpg';

img5=new Image ();img5.src='./2.jpg';

img6=new Image ();img6.src='./2.jpg';

url1=new Image ();url1.src='';

url2=new Image ();url2.src='';

url3=new Image ();url3.src='';

url4=new Image ();url4.src='';

url5=new Image ();url5.src='';

url6=new Image ();url6.src='';

//webjx.com

var nn=1;

var key=0;

function change_img()

{if(key==0){key=1;}

else if(document.all)

{document.getElementById("pic").filters.Apply();document.getElementById("pic").filters.Play(duration=2);}

eval('document.getElementById("pic").src=img'+nn+'.src');

eval('document.getElementById("url").href=url'+nn+'.src');

for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}

document.getElementById("xxjdjj"+nn).className='bxx';

nn++;if(nn>counts){nn=1;}

tt=setTimeout('change_img()',4000);}

function changeimg(n){nn=n;window.clearInterval(tt);change_img();}

document.write('');

document.write('

');

document.write('

');

document.write('

');

for(var i=1;i'+i+'');}

document.write('

change_img();

注意：

img1=new Image ();img1.src='./20.jpg';

img2=new Image ();img2.src='./21.jpg';

img3=new Image ();img3.src='./2.jpg';

img4=new Image ();img4.src='./2.jpg';

img5=new Image ();img5.src='./2.jpg';

img6=new Image ();img6.src='./2.jpg';

src='' 中的内容就是以幻灯片形式切换的图片路径，他们支应切换时的脚标，要把图片放到js的当前路径目录下

保存文件，新建HTML文档，命名为1.html

加入一行代码，保存文件，而后用浏览器打开，如下图

把我们的js特效加入，我们的网站中，

，保存HTML文档

用浏览器打开我们的网页，运行我们的网页如下图效果

注意：

img1=new Image ();img1.src='./20.jpg';

img2=new Image ();img2.src='./21.jpg';

img3=new Image ();img3.src='./2.jpg';

img4=new Image ();img4.src='./2.jpg';

img5=new Image ();img5.src='./2.jpg';

img6=new Image ();img6.src='./2.jpg';

src='' 中的内容就是以幻灯片形式切换的图片路径，他们支应切换时的脚标