[jQuery]flickSimpleプラグインで自動flick式ローテーションバナー

昨日、flickSimpleプラグインの導入方法について書きました。

で、今度は、自動でローテーションするflick式ローテーションバナーの作り方を調査しました。

#flick {
  width: 100%;
  max-width:690px;
  position: relative; /* IE6・7の overflowバグ回避 */
  overflow: hidden; /* JavaScript無効時にスクロール表示させたいから */
}
 
#flick ul {
  display: block;
  width: 1000%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
 
#flick ul li {
  float: left;
  list-style-type: none;
  width: 100%;
  max-width:690px;
  height:100px
}

<div id="flick">
  <ul>
    <li style="background-color:red;">1</li>
    <li style="background-color:blue;">2</li>
    <li style="background-color:yellow;">3</li>
    <li style="background-color:green;">4</li>
  </ul>
</div>

jQuery(function($){
  var nLen = $('#flick > ul > li').length;
 
  $('#flick > ul').css({
    width:(100*nLen) + '%'
  });
 
  $('#flick').flickSimple({
    snap: 'first',
  });
   
  var flick = $('#flick').flickSimple();
  setInterval(function(){
    if ( flick.startX != null ) { return; }
    (flick.pageLength < flick.page +1 )? flick.goTo(1): flick.nextPage(1);
  },3000);
});

これポイントは、

var flick = $('#flick').flickSimple();

とオブジェクト化しているところ。