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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
js中的this的指向问题详解
Aug 29 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php 生成文字png图片的代码
2011/04/17 PHP
列表内容的选择
2006/06/30 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python插入排序算法的实现代码
2013/11/21 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python中异常报错处理方法汇总
2016/11/20 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
如何利用python发送邮件
2020/09/26 Python
Django中ORM的基本使用教程
2020/12/22 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
给老婆大人的检讨书
2014/02/24 职场文书
标准化管理实施方案
2014/02/25 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
企业安全生产检查制度
2015/08/06 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书