使用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 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php制作文本式留言板
2015/03/18 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python 布尔操作实现代码
2013/03/23 Python
python的urllib模块显示下载进度示例
2014/01/17 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
运动会广播稿200米
2014/01/27 职场文书
新书吧创业计划书
2014/01/31 职场文书
C++程序员求职信
2014/05/07 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python