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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
javascript事件模型实例分析
Jan 30 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
对js关键字命名的疑问介绍
2014/04/25 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
node实现简单的反向代理服务器
2017/07/26 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
python中对list去重的多种方法
2014/09/18 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python global关键字的用法详解
2019/09/05 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
个人催款函范文
2015/06/23 职场文书
企业宣传稿范文
2015/07/23 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js