这是一款简单的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); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!