Adaptor是一个轻量级的内容滑块,旨在为开发人员提供一个简单的接口创建酷2 d或3 d动画幻灯片转换。使用方法创建一个视图端口的3 d视角和内添加HTML创建一个框包含幻灯片的内容。
This is slide one's description 
This is slide two's description 
This is slide three's description 
This is slide four's description 技术上不需要CSS但是如果div.slider-viewport是静态定位的外框插件将使用相对定位,这样就可以保持绝对定位框。应该注意,视窗和盒子应该相同的宽度和高度内容幻灯片,这样旋转没有出现偏离中心。这也是一个好主意来约束视窗的大小,以便幻灯片不喷出页面加载时间。.slider-viewport { width: 560px; height: 380px; overflow: hidden }$('#content-box').boxSlider( /* options */ );下面是一个例子,一个简单的2 d褪色过渡注册插件的褪色效果。(function (w, $, undefined) { w.jqBoxSlider.registerAnimator('fade', (function () { var adaptor = {}; // setup slide and box css adaptor.initialize = function ($box, $slides, settings) { // cache the original css for reset or destroy adaptor._cacheOriginalCSS($box, 'box', settings); adaptor._cacheOriginalCSS($slides, 'slides', settings); if ('static auto'.indexOf($box.css('position')) !== -1) { $box.css('position', 'relative'); } $box.css({height: $slides.eq(0).height(), overflow: 'hidden'}); $slides .css({ position: 'absolute', top: 0, left: 0 }) .filter(':gt(0)').hide(); }; // fade current out and next in adaptor.transition = function (settings) { settings.$nextSlide.fadeIn(settings.speed); settings.$currSlide.fadeOut(settings.speed); }; // reset the original css adaptor.destroy = function ($box, settings) { $box.children().css(settings.origCSS.slides); $box.css(settings.origCSS.box); }; return adaptor; }()));}(window, jQuery || Zepto)); ![Adaptor jQuery幻灯片3d动画效果]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······