JS基础——多张图片循环切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS基础——多张图片循环切换</title>
<script>
window.onload = function(){var oImg = document.getElementById('img');var arr = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];var num = 0;oImg.onclick = function(){num ++;    if(num == arr.length){num = 0;   }oImg.src = arr[num];};
};
</script>
</head><body>
<img id="img" src="data:images/1.jpg" />
</body>
</html>

思路：

1.先获取图片的id

2.定义一个存放多个图片的数组，并给它一个初始编号 num=0;

3.当点击图片时，先让num自增，然后判断num的值是否和数组的长度相等，如果相等，就让num回到0；

4.最后就把arr[num]赋给oImg的src属性，就能读取到图片的路径了。

这样，多张图片点击循环切换就完成了。

JS基础——多张图片循环切换相关推荐

js实现两张图片来回切换
点击张图片A,另一张图片B显示(这时A图片隐藏), 再次点击B图片,A图片显示(这时B图片隐藏) <!DOCTYPE html> <html lang="en"& ...
JS基础：变量、函数、对象、数组、循环、选择（判断）
JS基础:变量.函数.对象.数组.循环.选择(判断) js的三个组成部分 ECMAScript - ES - 语法规范 DOM - 文档对象模型 - API BOM - 浏览器对象模型 - API j ...
【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构
复习 JavaScript简称为JS JavaScript是什么? 是一门脚本语言:不需要编译,直接运行是一门解释性的语言:遇到一样代码就解释一行代码 C#语言是一门面向对象的语言,也是编译语言,是 ...
3、JS基础知识-前端面试
文章目录常见JS特效 1.在页面的盒子中显示鼠标坐标 2.滚动条的距离 3.动画函数的封装 4.轮播图的实现 5.图片放大效果 6.点击Tab栏的切换 7.精灵图的使用 8.字体图标的使用 < ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
前端工程化----Node.js基础篇
文章目录 1.认识Node.js Node.js是什么 Node.js应用场景 2.Node.js安装和版本管理 Node.js安装 Node.js版本工具 3.Node.js执行文件 4.Node. ...
Axure之实现图片自动循环切换效果
开心一笑 [男女的思维的确是不同,最近和老婆商量锻炼的事,因为我们俩都胖了,要开始锻炼.我第一个想到的是,安排在什么时间比较好:而她率先下单买了套运动服.昨天已经送到~~~] 视频教程大家好,我录制 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
2019年JS基础面试题
#JS基础 ###1.javascript的typeof返回哪些数据类型 string number array object function Boolean undefined 数组(Array) ...
js基础day01小结
第02阶段.前端基本功.前端基础.入门语法计算机知识补充学习目标理解简单了解计算机组成认识计算机内存一. 核心内容 1. 计算机组成 1.1 软件(程序) 系统软件:Windows.Lin ...

JS基础——多张图片循环切换

JS基础——多张图片循环切换相关推荐

最新文章

热门文章