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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
php获取参数的几种方法总结
2014/02/18 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
js资料toString 方法
2007/03/13 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python使用opencv读取图片的实例
2017/08/17 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
python使用递归的方式建立二叉树
2019/07/03 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
应用电子技术专业个人求职信
2013/09/21 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
高三毕业寄语
2014/04/10 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
中学教师师德承诺书
2014/05/23 职场文书
公证书格式
2015/01/23 职场文书
祝酒词范文
2015/08/12 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers