jquery 3d旋转轮播图效果

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jquery 3d旋转轮播图效果
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
jquery 3d旋转轮播图效果
分享:

    插件介绍

    这是一款简单的jquery 3d旋转轮播图效果。该轮播图基于bootstrap网格系统,通过jquery和CSS3 transforms来制作3D旋转效果,非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2017-12-02
    阅读:
简要教程

这是一款简单的jquery 3d旋转轮播图效果。该轮播图基于bootstrap网格系统,通过jquery和CSS3 transforms来制作3D旋转效果,非常炫酷。

使用方法

在页面中引入bootstrap.min.css,style.css和jquery文件。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
                
HTML结构

该轮播图的HTML结构如下:

<div class="wrap">
  <section class="cube-container">
    <div id="cube">
      <figure class="front">
        <div class="col-md-8 col-sm-12" style="background-image: url('img/1.jpg');"></div>
        <div class="col-md-4" style="height:inherit;display:inline-block;">
      <article>
          <img src="img/profile.svg" alt="logo" class="mb-4">
      </article>  
         </div>
      </figure>
      <figure class="back">
      <div class="col-md-8" style="background-image:url('img/2.jpg');"></div>
        <div class="col-md-4" style="height:inherit;display:inline-block;">
          <article>
            <img src="img/profile.svg" alt="logo" class="mb-4">

          <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
          </article>
        </div>
      </figure>
      <figure class="right">
        <div class="col-md-8" style="background-image:url('img/3.jpg');"></div>
        <div class="col-md-4" style="height:inherit;display:inline-block;">
          <article>
            <img src="img/profile.svg" alt="logo" class="mb-4">
          <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
          </article>
        </div>
          
        </figure>
      <figure class="left">
        <div class="col-md-8" style="background-image:url('img/4.jpg');"></div>
        <div class="col-md-4" style="height:inherit;display:inline-block;">
          <article>
            <img src="img/profile.svg" alt="logo" class="mb-4">
          <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
          </article>
        </div>
      </figure>
      <figure class="top">5</figure>
      <figure class="bottom">6</figure>
    </div>
  </section>
    
</div>

<div class="button-wrap">
  <button class="previous">Previous</button>
  <button class="next">Next</button>  
</div>
                
JavaScript

在页面DOM元素加载完毕之后,通过下面的js代码来完成该轮播图的初始化。

var counter = 0;
$('.next').on('click', function(){
  counter -= 90;
  var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';
  $('#cube').css('transform', rotation);
});
$('.previous').on('click', function(){
  counter += 90;
  var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';
  $('#cube').css('transform', rotation);
});
                
下一篇:没有了

网友评论