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

JavaScript实现自动切换图片代码

 更新时间：2016年10月11日 15:24:33   作者：yangzailu  
本文给大家分享一段js代码实现自动切换图片的代码，代码非常简单，应用领域非常广泛，感兴趣的朋友一起看看吧

本文给大家分享一段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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
window.onload=init;
var n=1; //图片标记数
var dingshi; //让图片动的定时器
function init(){
dingshi=window.setInterval("tupian()",1000);
}
//更换图片
function tupian(){
var obj=document.getElementById("img1");
n++;
if(n>=4){
n=1;
}
obj.src="yaj_"+n+".jpg";
}
//鼠标放上图片停止
function stoptupian(){
window.clearInterval(dingshi);
}
//鼠标离开图片动起来
function dongqilai(){
dingshi=window.setInterval("tupian()",1000);
}
</script>
</head>
<body>
<img src="yaj_1.jpg" onmouseover="stoptupian()" onmouseout="dongqilai()" id="img1"> 
</body>
</html>

以上所述是小编给大家介绍的JavaScript实现自动切换图片代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JS如何使用正则表达式(match)截取括号中的文字和数字

    JS如何使用正则表达式(match)截取括号中的文字和数字

    正则表达式是一种用来匹配文本模式的工具,这篇文章主要给大家介绍了关于JS如何使用正则表达式(match)截取括号中文字和数字的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • JS导入本地json文件数据的三类方法举例讲解

    JS导入本地json文件数据的三类方法举例讲解

    作为一名刚入行的开发者,你可能会遇到需要在JavaScript中引用JSON文件的情况,下面这篇文章主要给大家介绍了关于JS导入本地json文件数据的三类方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • javascript中"/"运算符常见错误

    javascript中"/"运算符常见错误

    　javascript里面的"/"运算符跟C++里面的"/"运算符不一样，后者自动取整，前者若非整除则会得到小数（比如说5/2=2.5）。
    2010-10-10
  • JavaScript导出Excel实例详解

    JavaScript导出Excel实例详解

    这篇文章主要介绍了JavaScript导出Excel的方法,以实例形式详细分析了javascript将WEB页面导出为EXCEL文档的方法及相关的技巧说明,对于深入了解javascript编程原理有一定的借鉴价值,需要的朋友可以参考下
    2014-11-11
  • 推荐一个封装好的getElementsByClassName方法

    推荐一个封装好的getElementsByClassName方法

    这篇文章主要推荐一个封装好的getElementsByClassName方法,需要的朋友可以参考下
    2014-12-12
  • JS如何将UTC格式时间转本地格式

    JS如何将UTC格式时间转本地格式

    UTC格式时间想必大家并不陌生，那么怎么可以将其转换为本地格式呢？其实很简单，下面的方法会帮助大家实现这一想法
    2013-09-09
  • JavaScript事件学习小结(五）js中事件类型之鼠标事件

    JavaScript事件学习小结(五）js中事件类型之鼠标事件

    这篇文章主要介绍了JavaScript事件学习小结(五）js中事件类型之鼠标事件的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • ASP中Sub和Function的区别说明

    ASP中Sub和Function的区别说明

    主要的区别是有返回值，一般sub是用来调用大量的内容的时候用sub，对于需要计算并需要返回值的时候用function，多用function定义函数。
    2011-01-01
  • 深入浅析JavaScript中对事件的三种监听方式

    深入浅析JavaScript中对事件的三种监听方式

    最近这段时间因为每天要修改网站，为网站做特效，所以看了很多的js接触事件，自己只会使用一小部分，有时用的时候也比较混乱，现在系统的整理了一下，本篇文章跟大家分享的是JavaScript中对事件的三种监听方式
    2015-09-09
  • javascript中判断json的方法总结

    javascript中判断json的方法总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的API或工具包，接下来跟着小编学习js中判断json的方法吧
    2015-08-08

最新评论