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 1.5最新版本的改进细节分析
Jan 19 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
Highcharts入门之简介
Aug 02 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
文件系统基本操作类
2006/11/23 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
Array对象方法参考
2006/10/03 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python梯度下降法的简单示例
2018/08/31 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
PHP面试题大全
2015/10/16 面试题
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
班主任工作经验材料
2014/02/02 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
婚前协议书范本两则
2014/10/16 职场文书
优秀员工事迹材料
2014/12/20 职场文书
老乡聚会通知
2015/04/23 职场文书
元宵节晚会主持词
2015/07/01 职场文书
工作简报范文
2015/07/21 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
JS实现简单的九宫格抽奖
2022/06/28 Javascript