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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
JS画线(实例代码)
Nov 20 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
Angular 多模块项目构建过程
Feb 13 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调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
js数据类型检测总结
2018/08/05 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
Java面试题及答案
2012/09/08 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
高中课程设置方案
2014/05/28 职场文书
房屋质量投诉书
2015/07/02 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Django实现翻页的示例代码
2021/05/24 Python
如何理解及使用Python闭包
2021/06/01 Python
使用JS实现简易计算器
2021/06/14 Javascript
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers