【每日一练】244—JS实现一款旋转图片库效果

每日一练11个月前更新 admin
2,416 0

第244练的最终效果如下:

【每日一练】244—JS实现一款旋转图片库效果

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>第244练-旋转图库</title>
    <link rel=”stylesheet” href=”index.css” />
  </head>
  <body>
    <div class=”image-container”>
      <span style=”–i: 1″>
        <img src=”https://picsum.photos/id/237/300/200″ />
      </span>
      <span style=”–i: 2″>
        <img src=”https://picsum.photos/id/23/300/200″ />
      </span>
      <span style=”–i: 3″>
        <img src=”https://picsum.photos/id/48/300/200″ />
      </span>
      <span style=”–i: 4″>
        <img src=”https://picsum.photos/id/12/300/200″ />
      </span>
      <span style=”–i: 5″>
        <img src=”https://picsum.photos/id/59/300/200″ />
      </span>
      <span style=”–i: 6″>
        <img src=”https://picsum.photos/id/160/300/200″ />
      </span>
      <span style=”–i: 7″>
        <img src=”https://picsum.photos/id/370/300/200″ />
      </span>
      <span style=”–i: 8″>
        <img src=”https://picsum.photos/id/478/300/200″ />
      </span>
    </div>
    <div class=”btn-container”>
      <button class=”btn” id=”prev”>上一张</button>
      <button class=”btn” id=”next”>下一张</button>
    </div>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100vh;
  justify-content: center;
  background-color: black;
  overflow: hidden;
}
.image-container {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.7s;
}
.image-container span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(calc(var(–i) * 45deg)) translateZ(400px);
}
.image-container span img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.btn-container {
  position: relative;
  width: 80%;
}
.btn {
  position: absolute;
  bottom: -80px;
  background-color: slateblue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover {
  filter: brightness(1.5);
}
#prev {
  left: 20%;
}
#next {
  right: 20%;
}

JS:

const imageContainerEl = document.querySelector(“.image-container”);
const prevEl = document.getElementById(“prev”);
const nextEl = document.getElementById(“next”);
let x = 0;
let timer;
prevEl.addEventListener(“click”, () => {
  x = x + 45;
  clearTimeout(timer);
  updateGallery();
});
nextEl.addEventListener(“click”, () => {
  x = x – 45;
  clearTimeout(timer);
  updateGallery();
});
function updateGallery() {
  imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`;
  timer = setTimeout(() => {
    x = x – 45;
    updateGallery();
  }, 3000);
}
updateGallery();
© 版权声明

相关文章

暂无评论

暂无评论...