首页>>焦点图>>带标题 有小圆点计数 左右翻页的焦点图 不同的效果(2014-04-19)

带标题 有小圆点计数 左右翻页的焦点图 不同的效果

带标题 有小圆点计数 左右翻页的焦点图 不同的效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <section>  
  2.     <div class="title">  
  3.       <!--<h3>» default</h3>-->  
  4.       <label>Effect:</label>  
  5.       <select id="effects-select">  
  6.         <option value="default">default</option>  
  7.         <option value="simple">simple</option>  
  8.         <option value="left">left</option>  
  9.         <option value="up">up</option>  
  10.         <option value="leftright">leftright</option>  
  11.         <option value="updown">updown</option>  
  12.         <option value="switchlr">switchlr</option>  
  13.         <option value="switchud">switchud</option>  
  14.         <option value="fliplr">fliplr</option>  
  15.         <option value="flipud">flipud</option>  
  16.         <option value="reduce">reduce</option>  
  17.         <option value="360">360</option>  
  18.       </select>  
  19.       <div class="code">  
  20.         <code>x: 6</code>  
  21.         <code>y: 4</code>  
  22.         <code>random: true</code>  
  23.       </div>  
  24.       <button type="button" class="start action">Play</button>  
  25.       <button type="button" class="stop action">Stop</button>  
  26.     </div>  
  27.     <div class="slider-wrap">  
  28.       <div class="slider">  
  29.         <p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>  
  30.         <img src="img/img01.jpg"/><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p>  
  31.         <img src="img/img02.jpg"/><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>  
  32.         <img src="img/img03.jpg"/><p><strong>Pork turkey:</strong> shoulder, filet mignon chuck t-bone bacon.</p>  
  33.       </div>  
  34.     </div>  
  35.     </section>  
  36.   
  37.     <script>  
  38.   
  39.       var $slider = $('.slider-wrap');  
  40.       var html = $slider.html();  
  41.   
  42.       // Options  
  43.   
  44.       var defaults = {  
  45.         thumbSize: 20,  
  46.         onSlideshowEnd: function(){ $('.stop, .start').toggle() }  
  47.       };  
  48.   
  49.       var effects = {  
  50.         'default': { x:6, y:4, random: true },  
  51.         simple: { x:6, y:4, effect: 'simple', random: true },  
  52.         left: { x:1, y:8, effect: 'left' },  
  53.         up: { x:20, y:1, effect: 'up', rewind: 60, backReverse: true },  
  54.         leftright: { x:1, y:8, effect: 'leftright' },  
  55.         updown: { x:20, y:1, effect: 'updown', cssSpeed: 500, backReverse: true },  
  56.         switchlr: { x:20, y:1, effect: 'switchlr', backReverse: true },  
  57.         switchud: { x:1, y:8, effect: 'switchud' },  
  58.         fliplr: { x:20, y:1, effect: 'fliplr', backReverse: true },  
  59.         flipud: { x:20, y:3, effect: 'flipud', reverse: true, rewind: 75 },  
  60.         reduce: { x:6, y:4, effect: 'reduce' },  
  61.         360: { x:1, y:1, effect: '360', fade: true, cssSpeed: 600 }  
  62.       };  
  63.   
  64.       $('#effects-select').change(function() {  
  65.         var effect = $(this).val();  
  66.         $slider.fadeTo( 0,0 ).html( html );  
  67.         $('.stop').hide();  
  68.         $('.start').show();  
  69.         setTimeout(function() {  
  70.           $('.slider').tilesSlider( $.extend( {}, defaults, effects[ effect ] ) );  
  71.           $slider.fadeTo( 0,1 );  
  72.           $('body').removeClass('tiles-preload');  
  73.         }, 100 );  
  74.         $('.code').empty().html(function() {  
  75.           var e = effects[ effect ], c = [];  
  76.           for ( var i in e ) {  
  77.             if ( i !== 'effect' ) {  
  78.               c.push('<code>'+ i +': '+ e[i] +'</code>');  
  79.             }  
  80.           }  
  81.           return c.join('');  
  82.         });  
  83.       });  
  84.   
  85.       $('.start').click(function() {  
  86.         $(this).hide();  
  87.         $('.stop').show();  
  88.         $('.slider').tilesSlider('start')  
  89.       });  
  90.   
  91.       $('.stop').click(function() {  
  92.         $(this).hide();  
  93.         $('.start').show()  
  94.         $('.slider').tilesSlider('stop')  
  95.       });  
  96.   
  97.       $('.slider').tilesSlider( $.extend( {}, defaults, effects['default'] ) );  
  98.   
  99.     </script>  

 


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