JavaScript实现自动切换图片代码


Posted in Javascript onOctober 11, 2016

本文给大家分享一段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实现自动切换图片代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
Javascript动画效果(2)
Oct 11 #Javascript
Javascript动画效果(1)
Oct 11 #Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 #Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 #Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 #Javascript
Node.js的文件权限及读写flag详解
Oct 11 #Javascript
最原始的jQuery注册验证方式
Oct 11 #Javascript
You might like
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
JS动画效果代码3
2008/04/03 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python字符串匹配算法KMP实例
2015/07/18 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python数学形态学实例分析
2019/09/06 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
群众路线剖析材料
2014/02/02 职场文书
创建文明学校实施方案
2014/03/11 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
公司员工活动策划方案
2014/08/20 职场文书
计划生育工作汇报
2014/10/28 职场文书
春季运动会加油词
2015/07/18 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android