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 相关文章推荐
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
php array_map()函数实例用法
2021/03/03 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
一个用js实现的页内搜索代码
2007/05/23 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python中的常量和变量代码详解
2018/07/25 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
如何通过python检查文件是否被占用
2020/12/18 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
2014自主招生自荐信策略
2014/01/27 职场文书
保密工作实施方案
2014/02/24 职场文书
银行贷款委托书范本
2014/10/11 职场文书
党员反邪教心得体会
2016/01/15 职场文书
大学生村官工作心得体会
2016/01/23 职场文书