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的颜色选择插件实例代码
Oct 02 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python实现Linux中的du命令
2017/06/12 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
SQL语言面试题
2013/08/27 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
服务生自我鉴定
2014/01/22 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Python实现机器学习算法的分类
2021/06/03 Python