使用JavaScript实现点击循环切换图片效果


Posted in Javascript onSeptember 03, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所述:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单击循环切换图片</title>
<script>
var i = 1;
function nextImg(){
i++;
//步骤2:获取页面元素
var next = document.getElementById("nImg");
//步骤3:更改元素的src属性
next.src = "img/"+i+".jpg";
if(i==3){
i=0;
} 
}
</script>
</head>
<body>
<div>
<!--步骤1:绑定onclick事件-->
<button onclick="nextImg()">下一张</button>
<br />
<!--需自己准备3张图片-->
<img src="img/1.jpg" id="nImg" width="600px" height="400px" />
</div>
</body>
</html>

总结

以上所述是小编给大家介绍的使用JavaScript实现点击循环切换图片效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
Angular4表单验证代码详解
Sep 03 #Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 #Javascript
javascript帧动画(实例讲解)
Sep 02 #Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 #Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
记录mysql性能查询过程的使用方法
2013/05/02 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
共产党员公开承诺书范文
2014/03/28 职场文书
经营理念标语
2014/06/21 职场文书
贷款工资证明范本
2015/06/12 职场文书
六五普法心得体会2016
2016/01/21 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
实操Python爬取觅知网素材图片示例
2021/11/27 Python