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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 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
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php数组去重的函数代码
2013/02/03 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
javascript Excel操作知识点
2009/04/24 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python实现简单日期工具类
2019/04/24 Python
如何通过Python实现标签云算法
2019/07/02 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python实现画图软件功能方法详解
2020/07/28 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
python源文件的字符编码知识点详解
2021/03/04 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
怀念母亲教学反思
2014/04/28 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2015年英语教师工作总结
2015/05/20 职场文书