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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
php判断目录存在的简单方法
2019/09/26 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
理解Python中函数的参数
2015/04/27 Python
在Python下尝试多线程编程
2015/04/28 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
django 类视图的使用方法详解
2019/07/24 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
采购部部长岗位职责
2014/02/06 职场文书
园艺师求职信
2014/03/10 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
公司合作协议范文
2014/10/01 职场文书
结婚保证书
2015/01/16 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python