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之Document元素选择器篇
Aug 14 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 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
3
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP 裁剪图片
2021/03/09 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
js打造数组转json函数
2015/01/14 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python实现微信打飞机游戏
2020/03/24 Python
深入了解NumPy 高级索引
2020/07/24 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
python 如何在测试中使用 Mock
2021/03/01 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
校园十佳歌手策划书
2014/01/22 职场文书
党员批评与自我批评
2014/02/12 职场文书
护理专业自荐信范文
2014/02/26 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
家庭贫困证明
2014/09/23 职场文书
环保建议书作文400字
2015/09/14 职场文书