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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 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的知识
2006/11/17 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
浅谈python中get pass用法
2019/03/19 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
详解Python实现进度条的4种方式
2020/01/15 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
软件工程专业推荐信
2013/10/28 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
工程质量月活动方案
2014/02/19 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
出差报告范文
2014/11/06 职场文书
优秀教师先进材料
2014/12/16 职场文书
普宁寺导游词
2015/02/04 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers