浅谈JavaScript_DOM学习篇_图片切换小案例
今天开始学习DOM操作,下面写一个小案例来巩固下知识点.
DOM: document object model (文档对象模型)
根据id获取页面元素 : 如: var xx = document.getElementById("id");
根据标签获取元素: 如: var xx = document.getElementsByTagName("div");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
/*设置上边距50px 水平居中*/
margin: 50px auto;
/*设置边框*/
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
text-align: center;
}
img {
width: 500px;
}
</style>
<script>
//btn 为按钮id clickEventFunction 为点击后执行的操作函数
function addClick(btn, clickEventFunction) {
var myButton = document.getElementById(btn);
myButton.onclick = clickEventFunction;
};
window.onload = function () {
(function () {
var pics = ["imgs/1.png",
"imgs/2.png",
"imgs/3.png"];
var index = 0;
showPicNum(index);
var img = document.getElementsByTagName("img")[0];
// var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
addClick("btn1", function () {
index--;
if (index <= -1) {
index = pics.length - 1;
}
console.log(index + " ----- ");
img.src = pics[index];
showPicNum(index);
});
addClick("btn2", function () {
index++;
if (index >= pics.length) {
index = 0;
}
console.log(index + " ++++++++ ");
img.src = pics[index];
showPicNum(index);
});
//
// btn1.onclick = function () {
// index --;
// if(index <= -1){
// index = pics.length - 1;
// }
// console.log(index + " ----- ");
// img.src = pics[index];
// showPicNum(index);
// };
// btn2.onclick = function () {
// index ++;
// if(index >= pics.length){
// index = 0;
// }
// console.log(index + " ++++++++ ");
// img.src = pics[index];
// showPicNum(index);
// };
console.log(index);
/**
* 展示当前图片为第几张
* @param index 当前图片索引
*/
function showPicNum(index) {
var descrs = document.getElementById("discs");
descrs.innerText = "一共" + pics.length + "张图片,当前第" + ++index + "张";
}
}())
};
</script>
</head>
<body>
<div id="outer">
<p id="discs"></p>
<img src="imgs/1.png"/><br>
<button id="btn1" type="button" value="上一张">上一张</button>
<button id="btn2" type="button" value="下一张">下一张</button>
</div>
</body>
</html>
文档目录:
效果如下:
以上所述是小编给大家介绍的JavaScriptDOM图片切换小案例详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
简单实现JavaScript图片切换效果
JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数的id,id作为clearInterval()函数的引用,目的是为了告诉clearInterval()函数动画暂停的位置.下面是实现的代码: 部分HTML代码:第一个为左按钮,是一张带箭头的透明图片,点击实现图片右滑动,第二个为图片展示区域,第
-
javascript图片切换综合实例（循环切换、顺序切换）
本文实例为大家介绍了javascript图片切换的两种方式,循环切换以及顺序切换的实例代码,分享给大家供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <style> p{margin:0;} input{border:none;outline: none;margin:0;padding:0;} img{width:300px;height:300px;} #loop{margin-le
-
轻松实现JavaScript图片切换
本文实例为大家介绍JavaScript图片切换的实现方法,分享给大家供大家参考,具体内容如下 效果图: 网页看到非常常见的一个图片切换效果:在淘宝.JD等购物时,介绍产品的图片会有多张,一般是显示一张,底下有一排小图片,鼠标放到小图片上大图片会切换.参考vivo X5M 移动4G手机 .下面记录一下实现的过程. 1. getElementById() 该方法是操作dom非常常用的一个方法,比如有一p标签,id设为pid,通过getElementById("pid")就可以对该元素进行操
-
浅谈JavaScript_DOM学习篇_图片切换小案例
今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.getElementById("id"); 根据标签获取元素: 如: var xx = document.getElementsByTagName("div"); <!DOCTYPE html> <html lang="en">
-
浅谈pyhton学习中出现的各种问题(新手必看)
目前比较杂乱无章,后续还会有一些添加补充 1.标识符 (1)标识符是区分大小写的. (2)标示符以字母或下划线开头,可包括字母,下划线和数字. (3)以下划线开头的标识符是有特殊意义的. 2.参数前加星号(*)的意义 面对实际情况时无法提前得知要传入的参数的个数,因此在参数前加星号从而允许函数接受任意多的参数,情况如下: (1)参数前加一个星号(*),传入的参数存储为元组的形式: (2)参数前加两个星号(*),传入的参数存储为字典的形式,并且调用时采用例如'a=1,b=2,c=3'的形式. 3.
-
浅谈用Webpack路径压缩图片上传尺寸获取的问题
问题的起因是因为的我的图片大小大于url-loader 的尺寸标准,导致webpack自动将图片的路径做了压缩处理,直接导致了我在获取dom的value的时候无法正确的获取到图片的正确路径. 直接上解决的方法. picUpload(e) { let image = new Image(); const reader = new FileReader(); const $img = e.target.files[0]; const formData = new FormData(); formDa
-
浅谈MyBatis-Plus学习之Oracle的主键Sequence设置的方法
一.Oracle的主键Sequence设置简介 在Oracle数据库中不支持主键自增策略,它是通过Sequence序列来进行完成的,因此需要在MP中进行相关配置 二.相关配置如下 2.1.pom.xml 添加相关依赖 注意:由于oracle的授权问题,没办法从maven仓库中下载,因此可以手动从oracle官网中下载,并本地打包到仓库中 <!-- Oracle驱动: 因为Oracle授权的问题,不能从Maven的仓库中下载到Oracle驱动 --> <dependency> <
-
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
数值运算 代码: # -*- coding=GBK -*- import cv2 as cv # 数值运算:加减乘除 def shu_image(src11, src22): src = cv.add(src11, src22) # 加 : 图像对应像素值相加,> 255 时取255 cv.namedWindow("add",0) cv.resizeWindow("add", 300, 300) # 设置播放窗口长和宽 cv.imshow("add&
-
浅谈迁移学习
目录 一.背景 二.定义及分类 2.1.目标 2.2.主要思想 2.3.迁移学习的形式定义及一种分类方式 三.关键点 四.基于实例的迁移 五.基于特征的迁移 5.1.特征选择 5.2.特征映射 六.基于共享参数的迁移 七.深度学习和迁移学习结合 八.Pre-training+Fine-tuning 九.DANN (Domain-Adversarial Neural Network) 一.背景 随着越来越多的机器学习应用场景的出现,而现有表现比较好的监督学习需要大量的标注数据,标注数据是一项枯燥无
-
浅谈Python中带_的变量或函数命名
Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下,不同程序员编写的 Python 代码可以保持最大程度的相似风格.这样就易于阅读,易于在程序员之间交流. python中的标识符可以包含数字.字母和_,但必须以字母或者_开头,其中以_开头的命名一般具有特殊的意义. 前后均带有双下划线__的命名 一般用于特殊方法的命名,用来实现对象的一些行为或者功能,比如__new__()方法用来创建实例,__init__()方法用来初始化对象,
-
浅谈Django学习migrate和makemigrations的差别
本文主要研究的是Django中migrate和makemigrations的差别,具体如下. 在你改动了 model.py的内容之后执行下面的命令: Python manger.py makemigrations 相当于 在该app下建立 migrations目录,并记录下你所有的关于modes.py的改动,比如0001_initial.py, 但是这个改动还没有作用到数据库文件 你可以手动打开这个文件,看看里面是什么 在此之后执行命令 python manager.py migrate 将该改
-
浅谈Java double 相乘的结果偏差小问题
看下面的一段代码的运行结果: public class TestDouble { public static void main(String[] args) { double d =538.8; System.out.println(d*100); } 输出结果很意外的不是 53880 而是53879.99999999999 解决方法一: 538.8*100 用*10*10 替换,才能得到我们想要的结果 538.8*10000 用 100*100替换. 解决方法二: public class
-
浅谈docker学习之docker数据卷(volume)
1.什么是数据卷volume 为了了解什么是Docker Volume,首先我们需要明确Docker内的文件系统是如何工作的.Docker镜像被存储在一系列的只读层.当我们开启一个容器,Docker读取只读镜像并添加一个读写层在顶部.如果正在运行的容器修改了现有的文件,该文件将被拷贝出底层的只读层到最顶层的读写层.在读写层中的旧版本文件隐藏于该文件之下,但并没有被不破坏 - 它仍然存在于镜像以下.当Docker的容器被删除,然后重新启动镜像时,将开启一个没有任何更改的新的容器 - 这些更改会丢失