幻灯片/轮播

3D Rotating Carousel 3D旋转图片插件

创客主机


这是一款js和CSS3 3D轮播图。这组3D轮播图中,共演示了6种轮播图效果。这些3D轮播图都是通过简单的JS代码配合CSS3来完成的。

HTML结构

以8张图片的3D轮播图为例,它的基本HTML结构如下:

  1. <div class="carousel">
    
  2.   <figure>
    
  3.         <img src="img/1.jpg" alt="">
    
  4.     <img src="img/2.jpg" alt="">
    
  5.     <img src="img/3.jpg" alt="">
    
  6.     <img src="img/4.jpg" alt="">
    
  7.     <img src="img/5.jpg" alt="">
    
  8.     <img src="img/6.jpg" alt="">
    
  9.     <img src="img/7.jpg" alt="">
    
  10.     <img src="img/8.jpg" alt="">
    
  11.   </figure>
    
  12.   <nav>
    
  13.     <button class="nav prev">Prev</button>
    
  14.     <button class="nav next">Next</button>
    
  15.   </nav>
    
  16. </div>

CSS样式

该3D轮播图的CSS样式如下:

  1. .carousel {
  2.   padding: 20px;
  3.   -webkit-perspective: 500px;
  4.           perspective: 500px;
  5.   overflow: hidden;
  6.   display: -webkit-box;
  7.   display: -ms-flexbox;
  8.   display: flex;
  9.   -webkit-box-orient: vertical;
  10.   -webkit-box-direction: normal;
  11.       -ms-flex-direction: column;
  12.           flex-direction: column;
  13.   -webkit-box-align: center;
  14.       -ms-flex-align: center;
  15.           align-items: center;
  16. }
  17. .carousel > * {
  18.   -webkit-box-flex: 0;
  19.       -ms-flex: 0 0 auto;
  20.           flex: 0 0 auto;
  21. }
  22. .carousel figure {
  23.   margin: 0;
  24.   width: 40%;
  25.   -webkit-transform-style: preserve-3d;
  26.           transform-style: preserve-3d;
  27.   -webkit-transition: -webkit-transform 0.5s;
  28.   transition: -webkit-transform 0.5s;
  29.   transition: transform 0.5s;
  30.   transition: transform 0.5s, -webkit-transform 0.5s;
  31. }
  32. .carousel figure img {
  33.   width: 100%;
  34.   box-sizing: border-box;
  35.   padding: 0 0px;
  36. }
  37. .carousel figure img:not(:first-of-type) {
  38.   position: absolute;
  39.   left: 0;
  40.   top: 0;
  41. }
  42. .carousel nav {
  43.   display: -webkit-box;
  44.   display: -ms-flexbox;
  45.   display: flex;
  46.   -webkit-box-pack: center;
  47.       -ms-flex-pack: center;
  48.           justify-content: center;
  49.   margin: 20px 0 0;
  50. }
  51. .carousel nav button {
  52.   -webkit-box-flex: 0;
  53.       -ms-flex: 0 0 auto;
  54.           flex: 0 0 auto;
  55.   margin: 0 5px;
  56.   cursor: pointer;
  57.   color: #333;
  58.   background: none;
  59.   border: 1px solid;
  60.   letter-spacing: 1px;
  61.   padding: 5px 10px;
  62. }

JavaScript

最后通过js代码来控制该3D轮播图的图片切换。

  1. 'use strict';
    
  2.  
  3. window.addEventListener('load', function () {
    
  4.   var carousels = document.querySelectorAll('.carousel');
    
  5.  
  6.   for (var i = 0; i < carousels.length; i++) {
    
  7.     carousel(carousels[i]);
    
  8.   }
    
  9. });
    
  10.  
  11. function carousel(root) {
    
  12.   var figure = root.querySelector('figure'),
    
  13.       nav = root.querySelector('nav'),
    
  14.       images = figure.children,
    
  15.       n = images.length,
    
  16.       gap = root.dataset.gap || 0,
    
  17.       bfc = 'bfc' in root.dataset,
    
  18.       theta = 2 * Math.PI / n,
    
  19.       currImage = 0;
    
  20.  
  21.   setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    
  22.   window.addEventListener('resize', function () {
    
  23.     setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    
  24.   });
    
  25.  
  26.   setupNavigation();
    
  27.  
  28.   function setupCarousel(n, s) {
    
  29.     var apothem = s / (2 * Math.tan(Math.PI / n));
    
  30.  
  31.     figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';
    
  32.  
  33.     for (var i = 0; i < n; i++) {
    
  34.       images[i].style.padding = gap + 'px';
    
  35.     }for (i = 1; i < n; i++) {
    
  36.       images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
    
  37.       images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
    
  38.     }
    
  39.     if (bfc) for (i = 0; i < n; i++) {
    
  40.       images[i].style.backfaceVisibility = 'hidden';
    
  41.     }rotateCarousel(currImage);
    
  42.   }
    
  43.  
  44.   function setupNavigation() {
    
  45.     nav.addEventListener('click', onClick, true);
    
  46.  
  47.     function onClick(e) {
    
  48.       e.stopPropagation();
    
  49.  
  50.       var t = e.target;
    
  51.       if (t.tagName.toUpperCase() != 'BUTTON') return;
    
  52.  
  53.       if (t.classList.contains('next')) {
    
  54.         currImage++;
    
  55.       } else {
    
  56.         currImage--;
    
  57.       }
    
  58.  
  59.       rotateCarousel(currImage);
    
  60.     }
    
  61.   }
    
  62.  
  63.   function rotateCarousel(imageIndex) {
    
  64.     figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
    
  65.   }
    
  66. }
(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!