使用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从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
在node中如何使用 ES6
Apr 22 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
js删除数组中某几项的方法总结
Jan 16 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python if语句知识点用法总结
2018/06/10 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
python判断是空的实例分享
2020/07/06 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
RealTek面试题
2016/06/28 面试题
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
导游词之张家口
2019/12/13 职场文书