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 多浏览器 事件大全
Mar 23 Javascript
jQuery cdn使用介绍
May 08 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
悬浮数字的实现案例
Feb 19 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
ES6中定义类和对象的方法示例
Jul 31 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Python+django实现文件下载
2016/01/17 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
护理自荐信范文
2013/10/05 职场文书
零件设计自荐信范文
2013/11/27 职场文书
服务员自我评价
2014/01/25 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
格林童话读书笔记
2015/06/30 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
《角的度量》教学反思
2016/02/18 职场文书