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实现相同内容合并单元格的代码
Jan 12 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JavaScript 实现轮播图特效的示例
Nov 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设计模式 php实现原型模式(prototype)
2015/12/07 PHP
js constructor的实际作用分析
2011/11/15 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
node网页分段渲染详解
2016/09/05 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
老生常谈js数据类型
2017/08/03 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python生成随机MAC地址
2015/03/10 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
职业教育毕业生求职信
2013/11/09 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
Python基础之数据结构详解
2021/04/28 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
SpringBoot整合Minio文件存储
2022/04/03 Java/Android