JS实现的简单图片切换功能示例【测试可用】


Posted in Javascript onFebruary 14, 2017

本文实例讲述了JS实现的简单图片切换功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
</head>
<body><script language="JavaScript1.1">
<!--
var slidespeed=2000
var slideimages=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg")
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function gotoshow(){
window.location=slidelinks[whichlink]
}
//-->
</script>
<img src="images/1.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)">
<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
//-->
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
Javascript下拉刷新的简单实现
Feb 14 #Javascript
Vue 短信验证码组件开发详解
Feb 14 #Javascript
JS去除字符串中空格的方法
Feb 14 #Javascript
Node.js与Sails redis组件的使用教程
Feb 14 #Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 #Javascript
canvas实现十二星座星空图
Feb 14 #Javascript
JavaScript省市级联下拉菜单实例
Feb 14 #Javascript
You might like
深入PHP中的HashTable结构详解
2013/06/13 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python入门之井字棋小游戏
2020/03/05 Python
如何用python写个模板引擎
2021/01/14 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
化妆品促销方案
2014/02/24 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
期末考试复习计划
2015/01/19 职场文书
酒店前台岗位职责
2015/04/16 职场文书
工作时间调整通知
2015/04/24 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
python双向链表实例详解
2022/05/25 Python