发表于： 2021-03-13 19:28:08
1 1988
今天完成的事情：完成了页面1的JS部分
明天计划的事情：做页面2的JS部分
收获：通过控制z-index来实现页面的转换
// 获取pages元素生成字符串数组，字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中
var pages = document.getElementsByClassName("page");
var butLeft = document.getElementById("butLeft");
var butRight = document.getElementById("butRight");
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组，用来存放pages里面的字符串元素
var pagess = [];
// for循环用来给pagess数组赋值，并且改变数组中的元素的层级
for (var i = 0; i < pages.length; i++) {
pagess[i] = pages[i];
pagess[i].style.zIndex = -i;
//var currentpage = pagess[i];
// 当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置
// 要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下
//currentpage.style.zIndex = -i;
}
// 设置计数器count，执行一次点击事件（向左或者向右）count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function () {
// 从数组头部弹出一个图片元素
var showFirst = pagess.shift();
// 给弹出的这个图片元素设置层级，即 －1000+count，
// 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
pagess.push(showFirst);
// 点击一次加1，不用考虑具体的值，只需要有点击事件加 1
count++;
}
// 向右点击事件
butRight.onclick = function () {
// 从pagess的尾部弹出一个元素，并赋值给showFirst
var showFirst = pagess.pop();
// 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插入数组pagess的头部
pagess.unshift(showFirst);
// 点击一次加1
count++;
}
返回列表
评论