cycle2 demo

by Chan Wu

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.tile.min.js"></script>
<link rel="stylesheet" href="http://gt.chan15.info/assets/css/style.css">
<button type="button" id="btn_pause">pause</button>
<button type="button" id="btn_destroy">destroy</button>

<div class="box" style="width: 400px; height: 200px; overflow: hidden;">
  <div class="bannertype-1">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <span class="text-1">塔位交易    價格透明</span>
    <span class="text-2">使用方便   買賣安心</span>
  </div>
  <div class="bannertype-2">
    <img src="http://lorempixel.com/400/200/sports/2/">
    <span class="text-1">賀！會員人數突破五千人！</span>
    <span class="text-2">點數儲值超優惠！買越多省越多喔！！</span>
  </div>
  <div class="bannertype-3">
    <img src="http://lorempixel.com/400/200/sports/3/">
    <span class="text-1">禮儀服務諮詢  專業用心服務</span>
    <span class="text-2">多元價格參考</span>
  </div>
  <div class="bannertype-4">
    <img src="http://lorempixel.com/400/200/sports/7/">
    <span class="text-1">塔位交易    價格透明</span>
    <span class="text-2">使用方便   買賣安心</span>
  </div>
  <div class="bannertype-5">
    <img src="http://lorempixel.com/400/200/sports/5/">
    <div class="bg_color">
      <span class="text-1">賀！會員人數突破五千人！</span>
      <span class="text-2">點數儲值超優惠！買越多省越多喔！！</span>
    </div>
  </div>
  <div class="bannertype-6">
    <img src="http://lorempixel.com/400/200/sports/6/">
    <span class="text-1">禮儀服務諮詢  專業用心服務</span>
    <span class="text-2">多元價格參考</span>
  </div>
</div>

JavaScript

$('.box').cycle({
  slides: '> div',
  fx: 'tileBlind'
});
$('.box').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
  $(outgoingSlideEl).removeClass('active');
  $(incomingSlideEl).addClass('active');
});

$('#btn_pause').on('click', function() {
  $('.box').cycle('pause');
});

$('#btn_destroy').on('click', function() {
  $('.box').cycle('destroy');
});