jQuery plugin :Slicebox - 3D Image Slider

[ 作者:笑傲江湖 发布于:2012年-10月-23日 16:18 星期二  分类:百 宝 箱 ]

介绍:
Slicebox 基于jQuery的一个3D效果图片切换展示插件,利用了CSS 3D Transforms的属性,老旧浏览器就无缘3D效果了,只能2D简单切换了,3D效果得浏览器支持,比如Chrome,Firefox,Opera,Safari,IE10等新版浏览器。点击下面的图片查看演示。 使用:
把你要展示的图片,放入一个UL的列表容器里,如下代码:
<ul id="sb-slider" class="sb-slider">
	<li>
		<a href="#" target="_blank">
			<img src="images/1.jpg" alt="image1"/>
		</a>
		<div class="sb-description">
			<h3>Creative Lifesaver</h3>
		</div>
	</li>
	<li>
		<img src="images/2.jpg" alt="image2"/>
		<div class="sb-description">
			<h3>...</h3>
		</div>
	</li>
	<li><!-- ... --></li>
	<!-- ... -->
</ul>
Class为sb-description的容器里是图片说明,放什么内容你自己看着办。
调用:
$('#sb-slider').slicebox();
选项:
	// 图片切片的旋转方向:(v)垂直, (h)水平 或者 (r)随机,默认为垂直。
	orientation : 'v',

	// 透视程度
	perspective : 1200,

	// 图片切片的数目,奇数,范围:0-15,默认值5
	cuboidsCount : 5,

	// 图片切片的数目随机,如果这个值是true,则上一个参数无效
	cuboidsRandom : false,

	// 图片切片的数目随机时,最大数值,提醒:切勿把数值设置过大,容易出事:)
	maxCuboidsCount : 5,

	// 切片的水平/垂直偏移量
	disperseFactor : 0,

	// 图片切片隐藏面的颜色
	colorHiddenSides : '#222',

	// 图片切片旋转的速度,单位毫秒 
	sequentialFactor : 150,

	// 动画速度,单位毫秒
	speed : 600,

	// 切换缓冲效果
	easing : 'ease',

	// 图片切换是否自动开始
	autoplay : false,

	// 如果上面的参数设置为true,自动切换间隔时间,单位毫秒
	interval: 3000,

	// 回退的淡入淡出时间,单位毫秒
	fallbackFadeSpeed : 300,
	
	// 回调函数
	onBeforeChange : function( position ) { return false; },
	onAfterChange : function( position ) { return false; }
插件来源:http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

Slicebox.zip
1.05MB

微信支付宝

标签: CSS CSS3 jQuery jQuery plugin slicebox slideshow

评论0 引用0 浏览3577

说点什么:

正文内容:

 




图片博文
适马 18-35mm F1.8 DC HSM帝都人民可以看海了