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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
vue实现简单跑马灯效果
May 25 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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类
2006/11/27 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python实现图书管理系统
2018/03/12 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
python开发入门——列表生成式
2020/09/03 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
日期和时间问题
2015/01/04 面试题
2014年手术室工作总结
2014/11/26 职场文书
2015年社区工作总结
2015/04/08 职场文书
《小摄影师》教学反思
2016/02/18 职场文书