使用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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
node.js中 stream使用教程
Aug 28 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
JS请求servlet功能示例
Jun 01 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
深入php内核之php in array
2015/11/10 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP xpath()函数讲解
2019/02/11 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python实现把数字转换成中文
2015/06/29 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
django中嵌套的try-except实例
2020/05/21 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
Ref与out有什么不同
2012/11/24 面试题
乔布斯辞职信(中英文对照)
2015/05/12 职场文书