脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS图片切换

JS实现的简单图片切换功能示例【测试可用】

 更新时间：2017年02月14日 10:22:41   作者：风起从容  
这篇文章主要介绍了JS实现的简单图片切换功能,结合实例形式分析了javascript结合时间函数定时触发控制图片的遍历与切换操作相关技巧,需要的朋友可以参考下

本文实例讲述了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运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • javascript写的一个链表实现代码

    javascript写的一个链表实现代码

    今天在百度上看到有人问怎么用Javascript 写一个学生管理系统。个人认为没有什么实现价值。无聊练练手吧，很久没写JS了。
    2009-10-10
  • js对象合并与数组合并综合应用举例

    js对象合并与数组合并综合应用举例

    这篇文章主要给大家介绍了关于js对象合并与数组合并综合应用举例的相关资料,本文将介绍常见的JS对象合并和数组合并方法,帮助读者更好地理解和运用这些方法,需要的朋友可以参考下
    2023-11-11
  • TypeScript函数和类型断言实例详解

    TypeScript函数和类型断言实例详解

    在某些情况下,我们会比TS更清楚一个数据的类型,这种时候我们就可以使用断言来告诉TS相信我,我知道自己在干什么,下面这篇文章主要给大家介绍了关于TypeScript函数和类型断言的相关资料,需要的朋友可以参考下
    2022-06-06
  • JavaScript之underscore_动力节点Java学院整理

    JavaScript之underscore_动力节点Java学院整理

    JavaScript是函数式编程语言，支持高阶函数和闭包。函数式编程非常强大，可以写出非常简洁的代码。下面通过实例讲解JavaScript之underscore的相关知识，一起看看吧
    2017-07-07
  • JavaScript强制类型转换和隐式类型转换操作示例

    JavaScript强制类型转换和隐式类型转换操作示例

    这篇文章主要介绍了JavaScript强制类型转换和隐式类型转换操作,结合实例形式分析了javascript字符串、数字等显示类型转换,以及运算、判断等情况下的隐式类型转换相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • JS中call apply bind函数手写实现demo

    JS中call apply bind函数手写实现demo

    这篇文章主要为大家介绍了JS中call apply bind函数手写实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • js 自定义个性下拉选择框示例

    js 自定义个性下拉选择框示例

    下拉选择框想必大家并不陌生，一边情况下都是使用默认的，为了打破传统，下面与大家分享下使用js自定义下拉选择框示例代码,感兴趣的朋友可以参考下
    2013-08-08
  • 第一次接触神奇的Bootstrap表单

    第一次接触神奇的Bootstrap表单

    第一次接触神奇的Bootstrap表单，Bootstrap让Web开发更迅速、更简单，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript中如何在一个循环中等待示例代码详解

    JavaScript中如何在一个循环中等待示例代码详解

    这篇文章主要介绍了在JavaScript中如何在一个循环中等待（附代码示例）,下面是如何使用for..of 循环来迭代一个数组并在循环内等待，需要的朋友可以参考下
    2022-08-08
  • 最丑的时钟效果！js canvas时钟制作方法

    最丑的时钟效果！js canvas时钟制作方法

    最丑的时钟效果，这篇文章主要为大家详细介绍了js canvas时钟制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论