幻灯片/轮播

3D图像旋转轮播图jQuery效果

创客主机

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

使用方法

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

  1. <link href="bootstrap.min.css" rel="stylesheet">
  2. <link href="style.css" rel="stylesheet">
  3. <script src="js/jquery.min.js" type="text/javascript"></script>

HTML结构

该轮播图的HTML结构如下:

  1. <div class="wrap">
  2.   <section class="cube-container">
  3.     <div id="cube">
  4.       <figure class="front">
  5.         <div class="col-md-8 col-sm-12" style="background-image: url('img/1.jpg');"></div>
  6.         <div class="col-md-4" style="height:inherit;display:inline-block;">
  7.       <article>
  8.           <img src="img/profile.svg" alt="logo" class="mb-4">
  9.       </article>  
  10.          </div>
  11.       </figure>
  12.       <figure class="back">
  13.       <div class="col-md-8" style="background-image:url('img/2.jpg');"></div>
  14.         <div class="col-md-4" style="height:inherit;display:inline-block;">
  15.           <article>
  16.             <img src="img/profile.svg" alt="logo" class="mb-4">
  17.  
  18.           <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
  19.           </article>
  20.         </div>
  21.       </figure>
  22.       <figure class="right">
  23.         <div class="col-md-8" style="background-image:url('img/3.jpg');"></div>
  24.         <div class="col-md-4" style="height:inherit;display:inline-block;">
  25.           <article>
  26.             <img src="img/profile.svg" alt="logo" class="mb-4">
  27.           <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
  28.           </article>
  29.         </div>
  30.  
  31.         </figure>
  32.       <figure class="left">
  33.         <div class="col-md-8" style="background-image:url('img/4.jpg');"></div>
  34.         <div class="col-md-4" style="height:inherit;display:inline-block;">
  35.           <article>
  36.             <img src="img/profile.svg" alt="logo" class="mb-4">
  37.           <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
  38.           </article>
  39.         </div>
  40.       </figure>
  41.       <figure class="top">5</figure>
  42.       <figure class="bottom">6</figure>
  43.     </div>
  44.   </section>
  45.  
  46. </div>
  47.  
  48. <div class="button-wrap">
  49.   <button class="previous">Previous</button>
  50.   <button class="next">Next</button>  
  51. </div>

JavaScript

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

  1. var counter = 0;
    
  2. $('.next').on('click', function(){
    
  3.   counter -= 90;
    
  4.   var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';
    
  5.   $('#cube').css('transform', rotation);
    
  6. });
    
  7. $('.previous').on('click', function(){
    
  8.   counter += 90;
    
  9.   var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';
    
  10.   $('#cube').css('transform', rotation);
    
  11. });
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!