imovies
当前位置:首 页>> 百 宝 箱 >>jQuery plugin :Slicebox - 3D Image Slider

jQuery plugin :Slicebox - 3D Image Slider

介绍:
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
微信支付宝

标 签:CSSCSS3jQueryjQuery pluginsliceboxslideshow

评 论0 引 用0 浏 览5358

上一篇12周年纪念

下一篇Earthflight : a bird’s-eye view of the world 鸟瞰世界

说点什么:

正文内容:

 

图片博文

Hell on Wheels

扫一扫分享之

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。