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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jquery图片旋转3d幻灯片插件
jquery图片旋转3d幻灯片插件
分享:

    插件介绍

    这是一款使用jQuery制作的3d幻灯片插件。共有七种效果:垂直3d翻转,水平3d翻转,垂直滚动,水平滚动,淡入淡出等效果。这款幻灯片插件过渡平滑,并带有进度条提示。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-30
    阅读:

简要教程

这款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();
  });

});