Adaptor jQuery幻灯片3d动画效果

Adaptor是一个轻量级的内容滑块,旨在为开发人员提供一个简单的接口创建酷2 d或3 d动画幻灯片转换。
使用方法
创建一个视图端口的3 d视角和内添加HTML创建一个框包含幻灯片的内容。
<div class="slider-viewport">
  <div id="content-box"><!-- the 3d box -->
    <figure><!-- slide -->
      <img src="img/slide-1.png">
      <figcaption>This is slide one's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-2.png">
      <figcaption>This is slide two's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-3.png">
      <figcaption>This is slide three's description</figcaption>
    </figure>
    <figure class="slide">
      <img src="img/slide-4.png">
      <figcaption>This is slide four's description</figcaption>
    </figure>
  </div>
</div>
技术上不需要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));