2017-12-8训练营第三天

今天的主要任务是利用javascript 制作一个图片切换的网页。

首先我们学了元素重叠，将五张图片通过定位 重叠在一起

<div class="tp" style="z-index: 1;"><img src="img/1.jpg"></div>
<div class="tp" style="z-index: 2;"><img src="img/2.jpg"></div>
<div class="tp" style="z-index: 3;"><img src="img/3.jpg"></div>
<div class="tp" style="z-index: 4;"><img src="img/4.jpg"></div>
<div class="tp" style="z-index: 5;"><img src="img/5.jpg"></div>

接下来用层叠元素值z-index把元素显示出来，值最大的会被显示出来，使用javascript实现图片的切换

首先创建了函数function 这个方法的主要逻辑就是通过调整z-index的值来实现图片的变换。

、使用document.getElementsByClassName(“标签的类名”)；来查找到图片的类名

使用imgCols.length 来获取元素的数量

在写逻辑的时候可以使用alert()来测试是否执行 使用for来进行遍历元素 是否超过元素集合的长度

如果超过将它设置为1   imgCols[0].style.zIndex或者zindex的值 最后调用函数就可以实现了。