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 相关文章推荐
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
浅谈javascript错误处理
Aug 11 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
js+css3实现炫酷时钟
Aug 18 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开源建站平台小结
2010/04/22 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Django中Forms的使用代码解析
2018/02/10 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Django框架视图介绍与使用详解
2019/07/18 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
大学生找工作推荐信范文
2013/11/28 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
白酒代理协议书范本
2014/10/26 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书