JS封装灯箱效果

天下秦风101

已于 2023-05-23 09:48:13 修改

阅读量94

点赞数 1

文章标签： javascript html css

于 2023-05-23 09:38:17 首次发布

本文链接：https://blog.csdn.net/2201_75522570/article/details/130820260

版权

html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>灯箱</title>
    <link rel="stylesheet" href="./deng.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="box" id="box">
        <div class="bigImg">
          <img src="../image/1.webp" alt="" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/2.webp" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/3.webp" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/4.webp" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/5.webp" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/6.webp" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/7.webp" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/8.webp" width="550" />
        </div>

        <div class="bigImg">
          <img src="../image/9.webp" width="550" />
        </div>
      </div>
    </div>
    <!-- 遮罩层相关 -->

    <script type="" src="./deng.js"></script>
  </body>
</html>

css:

.box {
  display: flex;
  flex-wrap: wrap;
}
.close {
  color: white;
  font-weight: 600;
  background-color: rgba(140, 139, 139, 0.8);
  width: 50px;
  height: 50px;
  position: absolute;
  text-align: center;
}
/* 遮罩层 */
#zhezhao {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(66, 66, 66, 0.8);
  display: none;
}

#xianshi {
  width: 60%;
  margin: 100px auto 0;
  overflow: hidden;
}

#xianshi img {
  width: 100%;
  height: auto;
}
#prev,
#next {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight: 600;
  position: absolute;
  background-color: rgba(99, 99, 99, 0.9);
}
#prev {
  left: 0;
}
#next {
  right: 0;
}

js:

(function () {
  var imgArrSrc = [];
var currentPage; //当前的显示的下标
init();
function init() {
  addZheZhao();
  getImgArr();
  addBigImgClick();
  addNext();
  addPrev();
  yinCangZheZhao();
}

console.log(imgArrSrc);
function getImgArr() {
  var imgArr = document.querySelectorAll(".bigImg img ");
  for (var i = 0; i < imgArr.length; i++) {
    imgArrSrc.push(imgArr[i].getAttribute("src"));
  }
}

//添加遮罩
function addZheZhao() {
  let zhezhao2 = `
	<div id="zhezhao">
      <div id="xianshi">
        <img src="../image/1.webp" id="bigImgbei" alt="" />
        <div id="prev"><</div>
        <div id="next">></div>
        <span class="close" id="close">X</span>
      </div>
    </div>
	`;

  var div = document.createElement("div"); //这里用文档碎片的原理加一个节点出来
  div.innerHTML = zhezhao2;
  document.body.appendChild(div); //这里加的必须是节点
}

//给bigImg添加点击事件
function addBigImgClick() {
  //获取bigImg
  let bigImgs = document.querySelectorAll(".bigImg");
  console.log(bigImgs);

  //添加事件
  bigImgs.forEach((item, index) => {
    item.setAttribute("data-index", index);
    console.log("item", item);
    item.onclick = function (e) {
      console.log("bigImg");
      //添加bigImg要执行的操作
      //需要显示遮罩层，并且显示对应点击图片，现有隐藏的遮罩层，然后只负责显示隐藏

      //   //显示zhezhao
      //   var divzhezhao = document.getElementById("zhezhao");
      //   divzhezhao.style.display = "block";
      //   //显示遮罩上面的图片
      //   let imgSrc = e.target.getAttribute("src");
      //   document.getElementById("bigImg").src = imgSrc;

      //设置成对应的下标
      let index = e.currentTarget.getAttribute("data-index");
      currentPage = index;
      displayImage();
    };
  });
}
//显示遮罩和图片
function displayImage() {
  //1、遮罩层显示
  document.getElementById("zhezhao").style.display = "block";
  //2、显示图片
  document.getElementById("bigImgbei").src = imgArrSrc[currentPage];
}

function addNext() {
  let btnRight = document.querySelector("#next");
  btnRight.onclick = next;
}

function addPrev() {
  let btnleft = document.querySelector("#prev");
  btnleft.onclick = prev;
}

function next() {
  currentPage++;
  if (currentPage >= imgArrSrc.length) {
    currentPage = 0;
  }
  displayImage();
}

function prev() {
  currentPage--;
  if (currentPage < 0) {
    currentPage = imgArrSrc.length - 1;
  }
  displayImage();
}
//隐藏遮罩层
function yinCangZheZhao() {
  console.log("yinCangZheZhao");
  let yinCang = document.querySelector("#close");
  yinCang.onclick=yinCangHanShu;
}
function yinCangHanShu() {
  document.getElementById("zhezhao").style.display = "none";
}

})()