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 相关文章推荐
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
tsconfig.json配置详解
May 17 Javascript
JavaScript实现表单验证功能
Dec 09 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编程中八种常见的文件操作方式
2006/11/19 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jQuery表单验证功能实例
2015/08/28 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
高中毕业生自我鉴定
2013/11/03 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
文明村镇申报材料
2014/05/06 职场文书
团结演讲稿范文
2014/05/23 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
Redis可视化客户端小结
2021/06/10 Redis
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Python中字符串对象语法分享
2022/02/24 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
golang生成并解析JSON
2022/04/14 Golang