SliceBox的简单使用和配置说明

  •   
  • 6254
  • jQuery
  • 3
  • super_dodo
  • 2014/09/17

SliceBox相当于一个3D轮播图插件。 先来查看它能实现的效果:
27203143-06c6ca1e404b4b2fb7f0577468c4e1d0
兼容性：由于该插件使用到了CSS3中的变换变形等属性，所以在不支持CSS3的浏览器中看不到3D效果，但是图片切换的时候会是前一张图片淡入后一张图片淡出的效果，不支持ie6，在ie6+的版本中基本上看不到3D效果，ie7 8 9 都是淡入淡出效果，在ie10中效果更糟，虽然有3D效果，但是效果非常蛋疼，出现3D效果的时候看不到图片了。

modernizr.js是用以探测浏览器对HTML5和CSS3新特性功能的支持。SliceBox用到了它进行浏览器兼容性的检查。参考：http://huangyang.me/modernizr.html

直接上代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>Slicebox - 3D图片滑块效果</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.46884.js"></script>
	<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.slicebox.js"></script>
</head>
<body>
		
<div id="slicebox">
	<ul id="sb-slider" class="sb-slider">
		<li>
			<a href="javascript:void(0)" target="_blank"><img src="images/1.jpg" width="1000px" alt="image1"/></a>
			<div class="sb-description"><h3>Creative Lifesaver</h3></div>
		</li>
		<li>
			<a href="javascript:void(0)" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
			<div class="sb-description"><h3>Honest Entertainer</h3></div>
		</li>
		<li>
			<a href="javascript:void(0)" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
			<div class="sb-description"><h3>Brave Astronaut</h3></div>
		</li>
		<li>
			<a href="javascript:void(0)" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
			<div class="sb-description"><h3>Affectionate Decision Maker</h3></div>
		</li>
		<li>
			<a href="javascript:void(0)" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
			<div class="sb-description"><h3>Faithful Investor</h3></div>
		</li>
		<li>
			<a href="javascript:void(0)" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
			<div class="sb-description"><h3>Groundbreaking Artist</h3></div>
		</li>
		<li>
			<a href="javascript:void(0)" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
			<div class="sb-description"><h3>Selfless Philantropist</h3></div>
		</li>
	</ul>
	
	<!-- <div id="shadow" class="shadow"></div -->
	
	<div id="nav-arrows" class="nav-arrows">
		<a href="javascript:void(0)">Next</a>
		<a href="javascript:void(0)">Previous</a>
	</div>
</div>

			
		
<script type="text/javascript">

	$(function() {
	
		var Page = (function() {
			var $navArrows = $( '#nav-arrows' ).hide(),
				$shadow = $( '#shadow' ).hide(),
				slicebox = $( '#sb-slider' ).slicebox( {
					onReady : function() {
						$navArrows.show();
						$shadow.show();
					},
					orientation : 'r',			//表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向
					disperseFactor : 30,
					autoplay : true, 			//是否自动开始切换
					interval:6000, 				//自动切换的时间6s
					perspective : 1000, 		//透视点距离，可以通过改变其值查看效果
					cuboidsCount : 3, 			//幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换
					cuboidsRandom : true, 		//是否随机 cuboidsCount 参数的值
					maxCuboidsCount : 5, 		//设置一个值用来规定最大的 cuboidsCount 值
					colorHiddenSides : "#333", 	//隐藏的幻灯片的颜色
					sequentialFactor : 150, 	//幻灯片切换时间（毫秒数）
					speed : 600, 				//每一块3D立方体的速度
					autoplay : true, 			//是否自动开始切换
				}),
				
				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;
					} );
				};
				return { init : init };
		})();
		Page.init();
		
	});
</script>
</body>
</html>

属性介绍：

interval:6000,//自动播放的时候每个多少毫秒播放下一个图片 orientation : "r", //表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向
perspective : 800, //透视点距离，可以通过改变其值查看效果（相当一你的眼睛离图片的距离）
cuboidsCount : 5, //幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换
cuboidsRandom : true, //是否随机 cuboidsCount 参数的值（切换图片的时候图片被切割的个数是随机的）
maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值
disperseFactor : 50,//被切割的时候每个块分开的像素距离，默认是0
colorHiddenSides : "#333", //隐藏的幻灯片的颜色（被切割块侧面的颜色）
sequentialFactor : 150, //幻灯片切换时间（毫秒数）
speed : 600, //每一块3D立方体的速度
 easing : 'ease', //切换效果
autoplay : true, //是否自动开始切换（如果设置为false，特通过play方法开始播放图片）
onBeforeChange : function(position) {},//改变前 onAfterChange : function(position) {}//改变后 //通过改变前改变后可以修改上面的文字说明

//常用方法
next();  //播放下一章张图片
previous(); //播放上一章张图片
play(); // 开始播放（当属性设置为不自动播放的时候，可以通过该方法开始播放）
pause(); // 暂停播放
jump(index); // 跳到哪一张图片
add();  应该是增加一张图片到当前播放的队列中
destory(); 应该是销毁slicebox对象
isActive(); 应该是判断当前图片是否正在切换

昨天很重要，它构建了我们的记忆；明天很重要，它让我们有了憧憬和梦想！