幻灯片/轮播

3D立方体图片画廊特效

创客主机


这是一款js和CSS3 3D立方体图片画廊特效。该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作。由于该该3D立方体图片画廊特效中使用了CSS变量和CSS grid,所以不是所以浏览器都支持该特效。

使用方法

在页面中引入样式文件style.css。

  1. <link href="css/style.css" rel="stylesheet">

HTML结构

该3D立方体图片画廊特效的HTML结构如下:

  1. <!--立方体图片画廊-->
  2. <div class="cube-container">
  3.  
  4.   <div class="cube initial-position">
  5.  
  6.     <img class="cube-face-image image-1" src="img/1.jpg">
  7.  
  8.     <img class="cube-face-image image-2" src="img/2.jpg">
  9.  
  10.     <img class="cube-face-image image-3" src="img/3.jpg">
  11.  
  12.     <img class="cube-face-image image-4" src="img/4.jpg">
  13.  
  14.     <img class="cube-face-image image-5" src="img/5.jpg">
  15.  
  16.     <img class="cube-face-image image-6" src="img/6.jpg">
  17.  
  18.   </div>
  19.  
  20. </div>
  21. <!-- 缩略图 -->
  22. <div class="image-buttons">
  23.  
  24.   <input type="image" class="show-image-1" src="img/1.jpg"></input>
  25.  
  26.   <input type="image" class="show-image-2" src="img/2.jpg"></input>
  27.  
  28.   <input type="image" class="show-image-3" src="img/3.jpg"></input>
  29.  
  30.   <input type="image" class="show-image-4" src="img/4.jpg"></input>
  31.  
  32.   <input type="image" class="show-image-5" src="img/5.jpg"></input>
  33.  
  34.   <input type="image" class="show-image-6" src="img/6.jpg"></input>
  35.  
  36. </div>

Javascript

然后在页面加载完毕之后,通过下面的js代码来完成点击缩略图旋转立方体的功能。

  1. window.addEventListener("DOMContentLoaded", function () {
  2.  
  3.       var cube = document.querySelector(".cube"),
  4.           imageButtons = document.querySelector(".image-buttons");
  5.           var cubeImageClass = cube.classList[1];
  6.  
  7.           //Add click event listener to image buttons container
  8.           imageButtons.addEventListener("click", function (e) {
  9.  
  10.             //Get node type and class value of clicked element
  11.             var targetNode = e.target.nodeName,
  12.                 targetClass = e.target.className;
  13.  
  14.             //Check if image input has been clicked and isn't the currently shown image
  15.             if (targetNode === "INPUT" && targetClass !== cubeImageClass) {
  16.  
  17.               console.log("Show Image: " + targetClass.charAt(11));
  18.  
  19.               //Replace previous cube image class with new class
  20.               cube.classList.remove(cubeImageClass);
  21.               cube.classList.add(targetClass);
  22.  
  23.               //Update cube image class variable with new class
  24.               cubeImageClass = targetClass;
  25.             }
  26.           });
  27. });

Codepen地址:https://codepen.io/GeorgePark/pen/gegavO

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!