使用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 相关文章推荐
解密效果
Jun 23 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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
yii框架builder、update、delete使用方法
2014/04/30 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python Web编程之WSGI协议简介
2018/07/18 Python
python中metaclass原理与用法详解
2019/06/25 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
NumPy中的维度Axis详解
2019/11/26 Python
python实现与redis交互操作详解
2020/04/21 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
劳资专员岗位职责
2013/12/27 职场文书
跟单文员岗位职责
2014/01/03 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
安全目标责任书
2014/07/22 职场文书
小学教育见习总结
2015/06/23 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
高考升学宴主持词
2019/06/21 职场文书