这款jQuery3d幻灯片插件共有7中效果。其中以3D旋转效果最吸引人。

插件中的精美插图来自于花瓣。

HTML结构

<section>
  <div id="viewport-shadow">
    <div id="viewport">
      <div id="box">
        <figure class="slide"><img src="img/1.jpg"> </figure>
        <figure class="slide"><img src="img/2.jpg"> </figure>
        <figure class="slide"><img src="img/3.jpg"> </figure>
        <figure class="slide"><img src="img/4.jpg"> </figure>
        <figure class="slide"><img src="img/5.jpg"> </figure>
      </div>
    </div>
    <div id="time-indicator"></div>
  </div>
  <footer>
    <nav class="slider-controls">
      <ul id="controls">
        <li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
        <li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
        <li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
        <li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
        <li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
      </ul>
    </nav>
  </footer>
</section>

JAVASCRIPT

要使用这款jQuery3d幻灯片插件首先要引入jQuery和box-slider-all.js文件。

<script type="text/javascript" src="Ban3D/jquery_1_7_2.js"></script>
<script type="text/javascript" src="Ban3D/box-slider-all.js"></script>

调用插件

$(function (){
  var $box = $('#box')
  , $indicators = $('.goto-slide')
  , $effects = $('.effect')
  , $timeIndicator = $('#time-indicator')
  , slideInterval = 5000;
  var switchIndicator = function ($c, $n, currIndex, nextIndex) {
  $timeIndicator.stop().css('width', 0);
  $indicators.removeClass('current').eq(nextIndex).addClass('current');
  };
  var startTimeIndicator = function () {
  $timeIndicator.animate({width: '680px'}, slideInterval);
  };

  // initialize the plugin with the desired settings
  $box.boxSlider({
  speed: 1000
  , autoScroll: true
  , timeout: slideInterval
  , next: '#next'
  , prev: '#prev'
  , pause: '#pause'
  , effect: 'scrollVert3d'
  , blindCount: 15
  , onbefore: switchIndicator
  , onafter: startTimeIndicator
  });

  startTimeIndicator();

  // pagination isn't built in simply because it's easy to
  // roll your own with the plugin API methods
  $('#controls').on('click', '.goto-slide', function (ev) {
  $box.boxSlider('showSlide', $(this).data('slideindex'));
  ev.preventDefault();
  });

  $('#effect-list').on('click', '.effect', function (ev) {
  var $effect = $(this);

  $box.boxSlider('option', 'effect', $effect.data('fx'));
  $effects.removeClass('current');
  $effect.addClass('current');

  switchIndicator(null, null, 0, 0);
  ev.preventDefault();
  });

});