使用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,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
我所理解的JavaScript中的this指向
Sep 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
如何将数据从文本导入到mysql
2006/10/09 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
教学大赛获奖感言
2014/01/15 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
图书借阅制度范本
2015/08/06 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
创业计划书之干洗店
2019/09/10 职场文书