使用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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
详解javascript中的事件处理
Nov 06 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
解决vue scoped html样式无效的问题
Oct 24 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 studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
理解javascript中的闭包
2017/01/11 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
Python socket编程实例详解
2015/05/27 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python实现的计数排序算法示例
2017/11/29 Python
使用Python读取大文件的方法
2018/02/11 Python
django用户登录和注销的实现方法
2018/07/16 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
大学三年计划书范文
2014/04/30 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
创业计划书之面包店
2019/09/12 职场文书
导游词之张家界
2019/10/31 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js