使用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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
JavaScript 语言的递归编程
May 18 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
layui table设置某一行的字体颜色方法
Sep 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
浅谈Python的list中的选取范围
2018/11/12 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
高中校园广播稿
2014/01/11 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
会计专业求职信范文
2015/03/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书