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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
vue路由权限校验功能的实现代码
Jun 07 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python文字转语音的实例代码分析
2019/11/12 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
会计应届生的自荐信
2013/12/13 职场文书
亲子拓展活动方案
2014/02/20 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android