jQuery和CSS3超酷3D立方体轮播图插件

这是一款jQuery和CSS3超酷3D立方体轮播图插件。该轮播图插件将图片构建为一个3D旋转立方体，用户通过点击分页圆点按钮，可以旋转立方体来查看图片。

使用方法

在页面中引入jquery和jQuery.cubeGalleryPlagin.js文件。

<script type="text/javascript" src = "js/jquery.min.js"></script>
<script type="text/javascript" src = "js/jQuery.cubeGalleryPlagin.js"></script>
                

HTML结构

该3D立方体轮播图的基本HTML结构如下：

<section class="container">
  <div class="carusel">
    <img class="figure" src="images/1.jpg">
    <img class="figure" src="images/2.jpg">
    <img class="figure" src="images/3.jpg">
    <img class="figure" src="images/4.jpg">
    <img class="figure" src="images/5.jpg">
    <img class="figure" src="images/6.jpg">
  </div>
  <div class="btn_links">
    <a href="#" class="button"></a>
    <a href="#" class="button"></a>
    <a href="#" class="button"></a>
    <a href="#" class="button"></a>
    <a href="#" class="button"></a>
    <a href="#" class="button"></a>
  </div>
</section>
                

CSS样式

为该3D立方体轮播图添加下面的必要CSS样式。

*{
    margin: 0;
    padding: 0;
}

.container {
    width: 250px;
    height: 250px;
    position: relative;
    margin: 100px auto;
    perspective: 1000px;
}

.carusel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 1s;
    transform: rotateX(0);
    margin: 50px auto;
}
.btn_links{
    position: relative;
    top: 500px;
}

.button{
    width: 15px;
    height: 15px;
    background-color: #000;
    border-radius: 20px;
    display: inline-block;
    margin: 0 10px;
    z-index: 1;
}                 
                

配置参数

该3D立方体轮播图的默认配置参数如下：

{
  width: 250,
  height: 250,
  linksClass: "button",
  imgClass: "figure",
  caruselClass: "carusel",
  slayderClass: 'container',
  axisRotate : "rotateY" //绕水平轴还是垂直轴旋转
}                  
                

该3D立方体轮播图插件的github地址为：https://github.com/matveeta/Cube-jQwery-Slider

相关插件

js扑克堆叠式卡片轮播图插件

js堆叠卡片轮播图插件stackedCards

jQuery和CSS3堆叠式轮播图特效

js 3D旋转木马特效插件