使用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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
JS轮播图的实现方法
Aug 24 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
PHP文本操作类
2006/11/25 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
js文字横向滚动特效
2015/11/11 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
《观舞记》教学反思
2014/04/16 职场文书
幼儿园运动会口号
2014/06/07 职场文书
电气工程师岗位职责
2015/02/12 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
python OpenCV学习笔记
2021/03/31 Python
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL