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 相关文章推荐
document.compatMode介绍
May 21 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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判断是否连接上网络的方法
2015/07/01 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
javascript 学习笔记(onchange等)
2010/11/14 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python多线程实例教程
2014/09/06 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
基于python3的socket聊天编程
2020/02/17 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python中字典增加和删除使用方法
2020/09/30 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
运动会入场词100字
2014/02/06 职场文书
导购员的岗位职责
2014/02/08 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python