使用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自动下载文件到本地的实现代码
Apr 28 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php中随机显示图片的函数代码
2011/06/23 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
浅谈python字符串方法的简单使用
2016/07/18 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python操作excel让工作自动化
2019/08/09 Python
Python生成器generator原理及用法解析
2020/07/20 Python
护士自我鉴定
2013/10/23 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
小学一年级评语大全
2014/04/22 职场文书
我的小天地教学反思
2014/04/30 职场文书
公司合并协议书范本
2014/09/30 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2014企业年终工作总结
2014/12/23 职场文书
创卫工作总结2015
2015/04/22 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript