使用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可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 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/11/16 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python将list转为matrix的方法
2018/12/12 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
pytorch进行上采样的种类实例
2020/02/18 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
自我评价200字分享
2013/12/17 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
有关爱国演讲稿
2014/05/07 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python