DHTML Slide Show script图片轮换


Posted in Javascript onMarch 03, 2008

步骤 1: 将下面代码加到 <head> 标签内:

<script type="text/javascript">   
/***********************************************    
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)    
* This notice must stay intact for legal use    
* Visit http://www.dynamicdrive.com/ for full source code    
***********************************************/    
var photos=new Array()    
var photoslink=new Array()    
var which=0   
//define images. You can have as many as you want:    
photos[0]="photo1.jpg"    
photos[1]="photo2.jpg"    
photos[2]="photo3.jpg"    
//Specify whether images should be linked or not (1=linked)    
var linkornot=0   
//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"    
photoslink[0]=""    
photoslink[1]=""    
photoslink[2]=""    
//do NOT edit pass this line    
var preloadedimages=new Array()    
for (i=0;i<photos.length;i++){    
preloadedimages[i]=new Image()    
preloadedimages[i].src=photos[i]    
}    
function applyeffect(){    
if (document.all && photoslider.filters){    
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)    
photoslider.filters.revealTrans.stop()    
photoslider.filters.revealTrans.apply()    
}    
}    
function playeffect(){    
if (document.all && photoslider.filters)    
photoslider.filters.revealTrans.play()    
}    
function keeptrack(){    
window.status="Image "+(which+1)+" of "+photos.length    
}    
function backward(){    
if (which>0){    
which--    
applyeffect()    
document.images.photoslider.src=photos[which]    
playeffect()    
keeptrack()    
}    
}    
function forward(){    
if (which<photos.length-1){    
which++    
applyeffect()    
document.images.photoslider.src=photos[which]    
playeffect()    
keeptrack()    
}    
}    
function transport(){    
window.location=photoslink[which]    
}    
</script>  

步骤 2: 将下面代码加到需要的地方:
<table border="0" cellspacing="0" cellpadding="0">   
<tr>   
<td width="100%" colspan="2" height="22"><center>   
<script>   
if (linkornot==1)    
document.write('<a href="javascript:transport()">')    
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')    
if (linkornot==1)    
document.write('</a>')    
</script>   
</center></td>   
</tr>   
<tr>   
<td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>   
<td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td>   
</tr>   
</table>   
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>   
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p> 
Javascript 相关文章推荐
js的匿名函数使用介绍
Dec 11 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
vue实现列表的添加点击
Dec 29 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
简单实现js放大镜效果
Jul 24 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
JavaScript面向对象编程
Mar 02 #Javascript
一个javascript参数的小问题
Mar 02 #Javascript
js加解密 脚本解密
Feb 22 #Javascript
JS应用之禁止抓屏、复制、打印
Feb 21 #Javascript
js 调整select 位置的函数
Feb 21 #Javascript
js 替换
Feb 19 #Javascript
javascript replace方法与正则表达式
Feb 19 #Javascript
You might like
PHP+DBM的同学录程序(5)
2006/10/09 PHP
PHP生成静态页面详解
2006/11/19 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
phplot生成图片类用法详解
2015/01/06 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
express异步函数异常捕获示例详解
2020/11/30 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
高一军训的心得体会
2014/09/01 职场文书
担保书范文
2015/01/20 职场文书
玄武湖导游词
2015/02/05 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android