jquery图片旋转3D幻灯片插件

<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>

<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();

  });

});