首页>>焦点图>>3D 图片播放焦点图插件 上下垂直3D切换，左右水平3D切换(2014-07-31)

3D 图片播放焦点图插件 上下垂直3D切换，左右水平3D切换

3D 图片播放焦点图插件 上下垂直3D切换，左右水平3D切换
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="viewport-shadow">  
  2.   
  3.           <a href="#" id="prev" title="go to the next slide"></a>  
  4.           <a href="#" id="next" title="go to the next slide"></a>  
  5.   
  6.           <div id="viewport">  
  7.             <div id="box">  
  8.               <figure class="slide">  
  9.                 <img src="img/the-battle.jpg">  
  10.               </figure>  
  11.               <figure class="slide">  
  12.                 <img src="img/hiding-the-map.jpg">  
  13.               </figure>  
  14.               <figure class="slide">  
  15.                 <img src="img/theres-the-buoy.jpg">  
  16.               </figure>  
  17.               <figure class="slide">  
  18.                 <img src="img/finding-the-key.jpg">  
  19.               </figure>  
  20.               <figure class="slide">  
  21.                 <img src="img/lets-get-out-of-here.jpg">  
  22.               </figure>  
  23.             </div>  
  24.           </div>  
  25.   
  26.           <div id="time-indicator"></div>  
  27.         </div>  

 

JavaScript Code
  1. <script>  
  2.   
  3.           $(function () {  
  4.   
  5.         var $box = $('#box')  
  6.           , $indicators = $('.goto-slide')  
  7.           , $effects = $('.effect')  
  8.           , $timeIndicator = $('#time-indicator')  
  9.           , slideInterval = 5000;  
  10.   
  11.         var switchIndicator = function ($c, $n, currIndex, nextIndex) {  
  12.           $timeIndicator.stop().css('width', 0);  
  13.           $indicators.removeClass('current').eq(nextIndex).addClass('current');  
  14.         };  
  15.   
  16.         var startTimeIndicator = function () {  
  17.           $timeIndicator.animate({width: '680px'}, slideInterval);  
  18.         };  
  19.   
  20.         // initialize the plugin with the desired settings  
  21.         $box.boxSlider({  
  22.             speed: 1000  
  23.           , autoScroll: true  
  24.           , timeout: slideInterval  
  25.           , next: '#next'  
  26.           , prev: '#prev'  
  27.           , pause: '#pause'  
  28.           , effect: 'scrollVert3d'  
  29.           , blindCount: 15  
  30.           , onbefore: switchIndicator  
  31.           , onafter: startTimeIndicator  
  32.         });  
  33.   
  34.         startTimeIndicator();  
  35.   
  36.         // pagination isn't built in simply because it's easy to  
  37.         // roll your own with the plugin API methods  
  38.         $('#controls').on('click', '.goto-slide', function (ev) {  
  39.           $box.boxSlider('showSlide', $(this).data('slideindex'));  
  40.           ev.preventDefault();  
  41.         });  
  42.   
  43.         $('#effect-list').on('click', '.effect', function (ev) {  
  44.           var $effect = $(this);  
  45.   
  46.           $box.boxSlider('option', 'effect', $effect.data('fx'));  
  47.           $effects.removeClass('current');  
  48.           $effect.addClass('current');  
  49.   
  50.           switchIndicator(null, null, 0, 0);  
  51.           ev.preventDefault();  
  52.         });  
  53.   
  54.           });  
  55.   
  56.         </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_393.html