使用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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
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
PHP4实际应用经验篇(8)
2006/10/09 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python 函数中的参数类型
2020/02/11 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
优秀求职信范文分享
2014/01/26 职场文书
大学军训感想
2014/02/12 职场文书
美容院经理岗位职责
2014/04/03 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
店面出租协议书范本
2014/11/28 职场文书
会计试用期自我评价
2015/03/10 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
实验心得体会范文
2016/01/25 职场文书
实习报告范文
2019/07/30 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript