第244练的最终效果如下：
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();
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
