使用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 JSQL,SQL无处不在,
May 05 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php连接mysql数据库代码
2009/03/10 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
vue2 全局变量的设置方法
2018/03/09 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python实现括号匹配方法详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
应届生保险求职信
2013/11/11 职场文书
2014最新实习证明模板
2014/10/02 职场文书
医生辞职信范文
2015/03/02 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
婚礼家长致辞
2015/07/27 职场文书
初中毕业生感言
2015/07/31 职场文书
个人业务学习心得体会
2016/01/25 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery