**實際操作**
http://demo.grnet.com.tw/dong-xiang-kitchen/demo/

**效果需求**

1. 圖片需要循環輪播
2. 滑入區塊停止輪播

**使用工具**

jquery.keyframes.js

**HTML**

<div class="marquee-wrapper">
  <!-- 需多撈一組資料來跑 -->
  <div class="marquee-slide">..1..</div>
  <div class="marquee-slide">..2..</div>
  <div class="marquee-slide">..3..</div>
  <div class="marquee-slide">..4..</div>
  <div class="marquee-slide">..5..</div>
  <div class="marquee-slide">..6..</div>
  <div class="marquee-slide">..7..</div>
  <div class="marquee-slide">..8..</div>
</div>

**JS**

  var _win = $(window);
  var marquee = $('.marquee-wrapper');
  var marqueeItem = $('.marquee-slide', marquee).length;
  var marqueeImgWidth = _win.width() / 3;
  if(marqueeItem >= 4) {
    $.keyframe.define({
      name: 'scrolling',
      from: { 'transform': 'translateX(0)' },
      to:   { 'transform': 'translateX(-'+ (marqueeItem / 2) * marqueeImgWidth +'px)' }
    });
    marquee.playKeyframe('scrolling ' + (marqueeItem * 5) + 's linear infinite');
  }

  marquee.on('mouseover', function() {
    marquee.pauseKeyframe();
  }).on('mouseout', function() {
    marquee.resumeKeyframe();
  });