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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
重置版战役片段
2020/04/09 魔兽争霸
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python contextlib模块使用示例
2015/02/18 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
python 自定义对象的打印方法
2019/01/12 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
解决Python中回文数和质数的问题
2019/11/24 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
出纳担保书范文
2014/04/02 职场文书
小学新学期寄语
2014/04/02 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL