3D旋转木马特效JavaScript插件

PetitQ 幻灯片/轮播 2019-7-23 2.34K 0 5

这是一款 js 3D 旋转木马特效插件。该插件通过 CSS3 和纯 js 来完成，可在中以 3D 旋转的方式来展示一组图片。

HTML 结构

```
<div id="drag-container">
```
```
  <div id="spin-container">
```

  <img src="images/pexels-photo-206395.jpeg" alt="">

  <img src="images/pexels-photo-1391498.jpeg" alt="">

  <img src="images/pexels-photo-1382731.jpeg" alt="">

  <img src="images/pexels-photo-1758144.jpeg" alt="">

  <img src="images/pexels-photo-1382734.jpeg" alt="">

  <img src="images/pexels-photo-1462636.jpeg" alt="">

```
 
```

  <a target="_blank" href="images/pexels-photo-139829.jpeg" rel="noopener noreferrer">

    <img src="images/pexels-photo-139829.jpeg" alt="">

```
  </a>
```
```
 
```

  <video controls autoplay="autoplay" loop>

```
    <source src="" type="video/mp4">
```
```
  </video>
```
```
 
```
```
  <p>3D Tiktok Carousel</p>
```
```
  </div>
```
```
  <div id="ground"></div>
```
```
</div>
```
```
<div id="music-container"></div>
```

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

CSS 样式

```
* {
```
```
  margin: 0;
```
```
  padding: 0;
```
```
}
```
```
 
```
```
html,
```
```
body {
```
```
  height: 100%;
```
```
}
```
```
 
```
```
body {
```
```
  overflow: hidden;
```
```
  display: flex;
```
```
  background: #111;
```
```
  perspective: 1000px;
```
```
  transform-style: preserve-3d;
```
```
}
```
```
 
```
```
#drag-container, #spin-container {
```
```
  position: relative;
```
```
  display: flex;
```
```
  margin: auto;
```
```
  transform-style: preserve-3d;
```
```
  transform: rotateX(-10deg);
```
```
}
```
```
 
```

#drag-container img, #drag-container video {

```
  transform-style: preserve-3d;
```
```
  position: absolute;
```
```
  left: 0;
```
```
  top: 0;
```
```
  width: 100%;
```
```
  height: 100%;
```
```
  line-height: 200px;
```
```
  font-size: 50px;
```
```
  text-align: center;
```
```
  box-shadow: 0 0 8px #fff;
```

  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);

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

#drag-container img:hover, #drag-container video:hover {

```
  box-shadow: 0 0 15px #fffd;
```

  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);

```
}
```
```
 
```
```
#drag-container p {
```
```
  font-family: Serif;
```
```
  position: absolute;
```
```
  top: 100%;
```
```
  left: 50%;
```

  transform: translate(-50%,-50%) rotateX(90deg);

```
  color: #fff;
```
```
}
```
```
 
```
```
#ground {
```
```
  width: 900px;
```
```
  height: 900px;
```
```
  position: absolute;
```
```
  top: 100%;
```
```
  left: 50%;
```

  transform: translate(-50%,-50%) rotateX(90deg);

  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);

```
}
```
```
 
```
```
#music-container {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
}
```
```
 
```
```
#carousel-container {
```
```
  width: 100%;
```
```
  height: 100%;
```
```
}
```
```
 
```
```
@keyframes spin {
```
```
  from{
```
```
    transform: rotateY(0deg);
```
```
  } to{
```
```
    transform: rotateY(360deg);
```
```
  }
```
```
}
```
```
@keyframes spinRevert {
```
```
  from{
```
```
    transform: rotateY(360deg);
```
```
  } to{
```
```
    transform: rotateY(0deg);
```
```
  }
```
```
}
```

JavaScript

```
var radius = 240; 
```
```
var autoRotate = true; 
```
```
var rotateSpeed = -60; 
```
```
var imgWidth = 120; 
```
```
var imgHeight = 170; 
```
```
 
```
```
var bgMusicURL = '';
```
```
var bgMusicControls = true; 
```
```
 
```

// ===================== start =======================

```
setTimeout(init, 100);
```
```
 
```

var obox = document.getElementById('drag-container');

var ospin = document.getElementById('spin-container');

var aImg = ospin.getElementsByTagName('img');

var aVid = ospin.getElementsByTagName('video');

```
var aEle = [...aImg, ...aVid]; 
```
```
 
```
```
ospin.style.width = imgWidth + "px";
```
```
ospin.style.height = imgHeight + "px";
```
```
 
```

var ground = document.getElementById('ground');

```
ground.style.width = radius * 3 + "px";
```

ground.style.height = radius * 3 + "px";

```
 
```
```
function init(delayTime) {
```

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

    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";

    aEle[i].style.transition = "transform 1s";

    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";

```
  }
```
```
}
```
```
 
```
```
function applyTranform(obj) {
```
```
  if(tY > 180) tY = 180;
```
```
  if(tY < 0) tY = 0;
```
```
 
```

  obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";

```
}
```
```
 
```
```
function playSpin(yes) {
```

  ospin.style.animationPlayState = (yes?'running':'paused');

```
}
```
```
 
```
```
var sX, sY, nX, nY, desX = 0,
```
```
    desY = 0,
```
```
    tX = 0,
```
```
    tY = 10;
```
```
 
```
```
if (autoRotate) {
```

  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');

  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;

```
}
```
```
 
```
```
if (bgMusicURL) {
```

  document.getElementById('music-container').innerHTML += `

<audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>

<p>If you are reading this, it is because your browser does not support the audio element.</p>

```
</audio>
```
```
`;
```
```
}
```
```
 
```
```
if (mobilecheck()) {
```

  // ==================== Touch Events ====================

```
  document.ontouchstart = function(e) {
```
```
    clearInterval(obox.timer);
```
```
    e = e || window.event;
```
```
    var sX = e.touches[0].clientX,
```
```
        sY = e.touches[0].clientY;
```
```
 
```
```
    this.ontouchmove = function(e) {
```
```
      e = e || window.event;
```
```
      var nX = e.touches[0].clientX,
```
```
          nY = e.touches[0].clientY;
```
```
      desX = nX - sX;
```
```
      desY = nY - sY;
```
```
      tX += desX * 0.1;
```
```
      tY += desY * 0.1;
```
```
      applyTranform(obox);
```
```
      sX = nX;
```
```
      sY = nY;
```
```
    }
```
```
 
```
```
    this.ontouchend = function(e) {
```

      this.ontouchmove = this.ontouchend = null;

      obox.timer = setInterval(function() {

```
        desX *= 0.95;
```
```
        desY *= 0.95;
```
```
        tX += desX * 0.1;
```
```
        tY += desY * 0.1;
```
```
        applyTranform(obox);
```
```
        playSpin(false);
```

        if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {

```
          clearInterval(obox.timer);
```
```
          playSpin(true);
```
```
        }
```
```
      }, 17);
```
```
    }
```
```
 
```
```
    // return false;
```
```
  }
```
```
} else {
```

  // ==================== Mouse Events ====================

```
  document.onmousedown = function(e) {
```
```
    clearInterval(obox.timer);
```
```
    e = e || window.event;
```
```
    var sX = e.clientX,
```
```
        sY = e.clientY;
```
```
 
```
```
    this.onmousemove = function(e) {
```
```
      e = e || window.event;
```
```
      var nX = e.clientX,
```
```
          nY = e.clientY;
```
```
      desX = nX - sX;
```
```
      desY = nY - sY;
```
```
      tX += desX * 0.1;
```
```
      tY += desY * 0.1;
```
```
      applyTranform(obox);
```
```
      sX = nX;
```
```
      sY = nY;
```
```
    }
```
```
 
```
```
    this.onmouseup = function(e) {
```

      this.onmousemove = this.onmouseup = null;

      obox.timer = setInterval(function() {

```
        desX *= 0.95;
```
```
        desY *= 0.95;
```
```
        tX += desX * 0.1;
```
```
        tY += desY * 0.1;
```
```
        applyTranform(obox);
```
```
        playSpin(false);
```

        if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {

```
          clearInterval(obox.timer);
```
```
          playSpin(true);
```
```
        }
```
```
      }, 13);
```
```
    }
```
```
 
```
```
    return false;
```
```
  }
```
```
  document.onmousewheel = function(e) {
```
```
    e = e || window.event;
```

    var d = e.wheelDelta / 20 || -e.detail;

```
    radius += d;
```
```
    init(1);
```
```
  };
```
```
}
```

Codepen 网址：https://codepen.io/hoanghien0410/pen/MMPaqm

3D 旋转木马特效 JavaScript 插件

已有 585 人购买

永久更新：
演示数据：
提取码：631l

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

幻灯片/轮播

3D旋转木马特效JavaScript插件

HTML 结构

CSS 样式

JavaScript

3D 旋转木马特效 JavaScript 插件

相关文章

超酷对角线图片轮播图特效

全屏视频图片轮播布局特效

html5 svg图片可3d旋转的扁平风格照片墙画廊

发表回复取消回复

热销模板

幻灯片/轮播

HTML 结构

CSS 样式

JavaScript

3D 旋转木马特效 JavaScript 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复