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 相关文章推荐
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
vue-test-utils初使用详解
May 23 Javascript
详解js中的几种常用设计模式
Jul 16 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应用技巧
2008/03/27 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
Java中final关键字详解
2015/08/10 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
ES6的新特性概览
2016/03/10 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python类参数self使用示例
2014/02/17 Python
Python map和reduce函数用法示例
2015/02/26 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Django web框架使用url path name详解
2019/04/29 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
聚美优品陈欧广告词
2014/03/14 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
红色旅游心得体会
2014/09/03 职场文书
城南旧事电影观后感
2015/06/16 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS