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 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
javascript常用的方法分享
Jul 01 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python修改列表值问题解决方案
2020/03/06 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
财务管理个人自荐书范文
2013/11/24 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
工作保证书范文
2014/04/29 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
家长给学校的建议书
2014/05/15 职场文书
公司委托书范本5篇
2014/09/20 职场文书
政府四风问题整改措施
2014/10/04 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
行政处罚决定书
2015/06/24 职场文书