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 学习之旅 (2)
Feb 05 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
详解javascript事件冒泡
Jan 09 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
JQuery animate动画应用示例
May 14 jQuery
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
isset和empty的区别
2007/01/15 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python实现简单成绩录入系统
2019/09/19 Python
Python tkinter模版代码实例
2020/02/05 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
numba提升python运行速度的实例方法
2021/01/25 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
服装厂厂长职责
2013/12/16 职场文书
连带责任保证书
2014/04/29 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
画展邀请函
2015/01/31 职场文书
大学生党员个人总结
2015/02/13 职场文书
导游词之张家口
2019/12/13 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
python中super()函数的理解与基本使用
2021/08/30 Python