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

PetitQ 幻灯片/轮播 2018-11-08 1.87K 0 0

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

HTML 结构

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

也想出现在这里？联系我们吧

```
<div class="carousel">
```
```
  <figure>
```
```
        <img src="img/1.jpg" alt="">
```
```
    <img src="img/2.jpg" alt="">
```
```
    <img src="img/3.jpg" alt="">
```
```
    <img src="img/4.jpg" alt="">
```
```
    <img src="img/5.jpg" alt="">
```
```
    <img src="img/6.jpg" alt="">
```
```
    <img src="img/7.jpg" alt="">
```
```
    <img src="img/8.jpg" alt="">
```
```
  </figure>
```
```
  <nav>
```

    <button class="nav prev">Prev</button>

    <button class="nav next">Next</button>

```
  </nav>
```
```
</div>
```

CSS 样式

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

```
.carousel {
```
```
  padding: 20px;
```
```
  -webkit-perspective: 500px;
```
```
          perspective: 500px;
```
```
  overflow: hidden;
```
```
  display: -webkit-box;
```
```
  display: -ms-flexbox;
```
```
  display: flex;
```
```
  -webkit-box-orient: vertical;
```
```
  -webkit-box-direction: normal;
```
```
      -ms-flex-direction: column;
```
```
          flex-direction: column;
```
```
  -webkit-box-align: center;
```
```
      -ms-flex-align: center;
```
```
          align-items: center;
```
```
}
```
```
.carousel > * {
```
```
  -webkit-box-flex: 0;
```
```
      -ms-flex: 0 0 auto;
```
```
          flex: 0 0 auto;
```
```
}
```
```
.carousel figure {
```
```
  margin: 0;
```
```
  width: 40%;
```
```
  -webkit-transform-style: preserve-3d;
```
```
          transform-style: preserve-3d;
```

  -webkit-transition: -webkit-transform 0.5s;

```
  transition: -webkit-transform 0.5s;
```
```
  transition: transform 0.5s;
```

  transition: transform 0.5s, -webkit-transform 0.5s;

```
}
```
```
.carousel figure img {
```
```
  width: 100%;
```
```
  box-sizing: border-box;
```
```
  padding: 0 0px;
```
```
}
```

.carousel figure img:not(:first-of-type) {

```
  position: absolute;
```
```
  left: 0;
```
```
  top: 0;
```
```
}
```
```
.carousel nav {
```
```
  display: -webkit-box;
```
```
  display: -ms-flexbox;
```
```
  display: flex;
```
```
  -webkit-box-pack: center;
```
```
      -ms-flex-pack: center;
```
```
          justify-content: center;
```
```
  margin: 20px 0 0;
```
```
}
```
```
.carousel nav button {
```
```
  -webkit-box-flex: 0;
```
```
      -ms-flex: 0 0 auto;
```
```
          flex: 0 0 auto;
```
```
  margin: 0 5px;
```
```
  cursor: pointer;
```
```
  color: #333;
```
```
  background: none;
```
```
  border: 1px solid;
```
```
  letter-spacing: 1px;
```
```
  padding: 5px 10px;
```
```
}
```

JavaScript

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

```
'use strict';
```
```
 
```

window.addEventListener('load', function () {

  var carousels = document.querySelectorAll('.carousel');

```
 
```

  for (var i = 0; i < carousels.length; i++) {

```
    carousel(carousels[i]);
```
```
  }
```
```
});
```
```
 
```
```
function carousel(root) {
```

  var figure = root.querySelector('figure'),

```
      nav = root.querySelector('nav'),
```
```
      images = figure.children,
```
```
      n = images.length,
```
```
      gap = root.dataset.gap || 0,
```
```
      bfc = 'bfc' in root.dataset,
```
```
      theta = 2 * Math.PI / n,
```
```
      currImage = 0;
```
```
 
```

  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));

  window.addEventListener('resize', function () {

    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));

```
  });
```
```
 
```
```
  setupNavigation();
```
```
 
```
```
  function setupCarousel(n, s) {
```

    var apothem = s / (2 * Math.tan(Math.PI / n));

```
 
```

    figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

```
 
```
```
    for (var i = 0; i < n; i++) {
```

      images[i].style.padding = gap + 'px';

```
    }for (i = 1; i < n; i++) {
```

      images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';

      images[i].style.transform = 'rotateY(' + i * theta + 'rad)';

```
    }
```
```
    if (bfc) for (i = 0; i < n; i++) {
```

      images[i].style.backfaceVisibility = 'hidden';

```
    }rotateCarousel(currImage);
```
```
  }
```
```
 
```
```
  function setupNavigation() {
```

    nav.addEventListener('click', onClick, true);

```
 
```
```
    function onClick(e) {
```
```
      e.stopPropagation();
```
```
 
```
```
      var t = e.target;
```

      if (t.tagName.toUpperCase() != 'BUTTON') return;

```
 
```

      if (t.classList.contains('next')) {

```
        currImage++;
```
```
      } else {
```
```
        currImage--;
```
```
      }
```
```
 
```
```
      rotateCarousel(currImage);
```
```
    }
```
```
  }
```
```
 
```

  function rotateCarousel(imageIndex) {

    figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';

```
  }
```
```
}
```

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

已有 466 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

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

HTML 结构

CSS 样式

JavaScript

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

相关文章

百叶窗过渡效果jQuery幻灯片插件

滚动条圆形立体图片旋转滚动幻灯片

三面板布局图片轮播jQuery特效

发表回复取消回复

热销模板

幻灯片/轮播

HTML 结构

CSS 样式

JavaScript

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复