使用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数组循环遍历数组内所有元素的方法
Jan 18 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
vue v-for 使用问题整理小结
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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php截取字符串函数分享
2015/02/02 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
基python实现多线程网页爬虫
2015/09/06 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
西部世纪面试题
2014/12/05 面试题
大学生毕业自我鉴定范文
2013/11/03 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电