这是一款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
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201709144739.html