jQuery的slicebox插件实现3D翻转轮播效果
最近做项目,banner要实现立体的翻转效果,通过搜索,发现了jQuery的一款插件,能够很好的实现该效果,这里就记录一下。
效果图如下:
使用方法:
1. 在html中引入必要的js和css文件:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slicebox - 3D Image Slider</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<script type="text/javascript" src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a href=""><img src="data:images/1.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<a href=""><img src="data:images/2.jpg" alt="image2"/></a>
<div class="sb-description">
<h3>Honest Entertainer</h3>
</div>
</li>
<li>
<a href=""><img src="data:images/3.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Brave Astronaut</h3>
</div>
</li>
<li>
<a href=""><img src="data:images/4.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Affectionate Decision Maker</h3>
</div>
</li>
</ul> <!--图片阴影-->
<div id="shadow" class="shadow"></div>
<!--前后按钮-->
<div id="nav-arrows" class="nav-arrows">
<a href="#">Next</a>
<a href="#">Previous</a>
</div> <!--底部小按钮-->
<div id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
</div> </div>
<!-- /wrapper -->
</div> <script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.slicebox.js"></script> </body>
</html>
2. css:
/*公共样式 可不要*/ *,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:;
margin:;
} /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
content: "";
display: table;
clear: both;
} /* General Demo Style */
body {
color: #444;
font-family: "PT Sans Narrow", Arial, sans-serif;
font-size: 13px;
font-weight:;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
min-width: 320px;
} a {
color: #000;
text-decoration: none;
} h1, h2, h5 {
margin: 20px 20px 30px 20px;
font-size: 56px;
color: #fff;
font-family: "Volkhov", serif;
text-align: center;
font-weight:;
text-shadow: 1px 1px 3px #e0d1bc;
} h1 span, h5 {
font-size: 18px;
display: block;
font-style: italic;
color: #997f5a;
font-weight:;
text-shadow: 0px 1px 1px #fff;
} .wrapper {
position: relative;
max-width: 840px;
width: 100%;
padding: 0 50px;
margin: 0 auto;
} /* Slicebox Style */
.sb-slider {
margin: 10px auto;
position: relative;
overflow: hidden;
width: 100%;
list-style-type: none;
padding:;
} .sb-slider li {
margin:;
padding:;
display: none;
} .sb-slider li > a {
outline: none;
} .sb-slider li > a img {
border: none;
} .sb-slider img {
max-width: 100%;
display: block;
} .sb-description {
padding: 20px;
bottom: 10px;
left: 10px;
right: 10px;
z-index:;
position: absolute;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
border-left: 4px solid rgba(255,255,255,0.7);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:;
color: #fff; -webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
} .sb-slider li.sb-current .sb-description {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity:;
} .sb-slider li.sb-current .sb-description:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
background: rgba(190,176,155, 0.7);
} .sb-perspective {
position: relative;
} .sb-perspective > div {
position: absolute; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d; -webkit-backface-visibility : hidden;
-moz-backface-visibility : hidden;
-o-backface-visibility : hidden;
-ms-backface-visibility : hidden;
backface-visibility : hidden;
} .sb-side {
margin:;
display: block;
position: absolute; -moz-backface-visibility : hidden; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.shadow {
width: 100%;
height: 168px;
position: relative;
margin-top: -110px;
background: transparent url(../images/shadow.png) no-repeat bottom center;
background-size: 100% 100%; /* stretches it */
z-index: -1;
display: none;
} .sb-description h3 {
font-size: 20px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
} .sb-description h3 a {
color: #4a3c27;
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
} .nav-arrows {
display: none;
} .nav-arrows a {
width: 42px;
height: 42px;
background: #cbbfae url(../images/nav.png) no-repeat top left;
position: absolute;
top: 50%;
left: 2px;
text-indent: -9000px;
cursor: pointer;
margin-top: -21px;
opacity: 0.9;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(255,255,255,0.8);
} .nav-arrows a:first-child{
left: auto;
right: 2px;
background-position: top right;
} .nav-arrows a:hover {
opacity:;
} .nav-dots {
text-align: center;
position: absolute;
bottom: -5px;
height: 30px;
width: 100%;
left:;
display: none;
} .nav-dots span {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #cbbfae;
cursor: pointer;
box-shadow:
0 1px 1px rgba(255,255,255,0.6),
inset 0 1px 1px rgba(0,0,0,0.1);
} .nav-dots span.nav-dot-current {
box-shadow:
0 1px 1px rgba(255,255,255,0.6),
inset 0 1px 1px rgba(0,0,0,0.1),
inset 0 0 0 3px #cbbfae,
inset 0 0 0 8px #fff;
} .nav-options {
width: 70px;
height: 30px;
position: absolute;
right: 70px;
bottom: 0px;
display: none;
} .nav-options span {
width: 30px;
height: 30px;
background: #cbbfae url(../images/options.png) no-repeat top left;
text-indent: -9000px;
cursor: pointer;
opacity: 0.7;
display: inline-block;
border-radius: 50%;
} .nav-options span:first-child{
background-position: -30px 0px;
margin-right: 3px;
} .nav-options span:hover {
opacity:;
}
3. js
jquery.slicebox.js文件可以在这里下载: http://www.codeforge.cn/read/251779/jquery.slicebox.js__html
4. 最后调用即可:
$(function() {
var Page = (function() {
var $navArrows = $( '#nav-arrows' ).hide(),
$navDots = $( '#nav-dots' ).hide(),
$nav = $navDots.children( 'span' ),
$shadow = $( '#shadow' ).hide(), slicebox = $( '#sb-slider' ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$shadow.show();
},
onBeforeChange : function( pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
}), init = function() {
initEvents();
}, initEvents = function() {
// add navigation events
$navArrows.children( ':first' ).on( 'click', function() {
slicebox.next();
return false;
}); $navArrows.children( ':last' ).on( 'click', function() {
slicebox.previous();
return false;
}); $nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slicebox.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slicebox.jump( i + 1 );
return false;
});
});
};
return { init : init };
})();
Page.init();
});
5. 有一些参数,可以根据自己的需要进行设置:
orientation:’v’ —— 表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向;
perspective:1200 —— 透视点距离;
cuboidsCount:3 —— 幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换;
cuboidsRandom : false —— 是否随机 cuboidsCount 参数的值;
maxCuboidsCount : 5 —— 设置一个值用来规定最大的 cuboidsCount 值;
colorHiddenSides : ‘#222′ —— 隐藏的幻灯片的颜色;
sequentialFactor : 150 —— 幻灯片切换时间(毫秒数);
speed : 600 —— 每一块3D立方体的速度;
autoplay : false —— 是否自动开始切换。
jQuery的slicebox插件实现3D翻转轮播效果的更多相关文章
- Taro -- Swiper的图片由小变大3d轮播效果
Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...
- Bootstrap插件之Carousel轮播效果(2015年-05月-21日)
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- jQuery 写的插件图片上下切换幻灯效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 20行代码实现简单轮播效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js插件-图片椭圆轮播效果
插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...
- jquery的常用插件
jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...
- jQuery插件实践之轮播练习(一)
所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...
随机推荐
- xcode怎样分析检测内存泄露(iOS)
虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄露还是可能存在.所以了解原理很重要. 这里讲述在没有ARC的情况下,如何使用Instruments来查找程序中的内存泄露, ...
- Webpack4 学习笔记四 暴露全局变量、externals
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...
- [优化]Steamroller-freecodecamp算法题目
晚上在medium看到一篇关于找工作的文章,里面提到一个面试题目--flattening an array(扁平化数组).这我好像在哪看过!应该是freecodecamp里的算法某一题.翻了下博客记录 ...
- harbor 配置 Keepalived 实现HA
环境说明: $ cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) vip : 192 168 93 142 MASTER-har ...
- C#爬虫实践
忘了什么时候加的,iPad上的人人视频追剧了<我的天才女友>,没事的时候看了下,感觉还不错,进一步了解到原著那不勒斯四部曲,感觉视频进度有些慢,就想找找书看看,一时没找到[PS:购买实体书 ...
- my share
网盘一: username:3a1bd0f6634d72a0423aa21c7d2dee1a password:adaa0dfa36f537a4469fcc6e78823e1c 网盘二: userna ...
- cacti和nagios监控web平台搭建
在linux的运维中对服务器的监控,时刻了解服务器的状态是确保服务能够正常允许的条件,linux的服务监控平台有很多, cacti 下面对cacti(仙人掌),一种比较流行的开源监控软件做安装配置 具 ...
- 用python写一个类似于linux中的tree
import os filePath = 'g:/File' j = 0 # 查找的深度计数 def tree(filePath,j): dir_now = os.listdir(filePath) ...
- A Country on Wheels【车轮上的国家】
A Country on Wheels As cultural symbols go, the American car is quite young. 作为文化象征的美国汽车还相当年轻. The ...
- 解答室内定位技术新方向:蓝牙AoA定位,值得了解 ——概念了解
转载搜狐 室内定位一直被炒的非常火的黑科技,也是近年资本追逐的热点,市场上一直有众多宣称可以做到厘米级,米级精度定位的公司,但问题很多,无法大规模商用.近些年有很多人尝试使用蓝牙beacon方式做定位 ...