一定間隔でクラス名を付与していくJavaScriptのコード

2013/08/10 10:06:59

こういうの、コードスニペットって言うんかしら？

・特定の要素に順番にクラスを付与したい
・特定の要素の一つにだけクラスを付与したい

フィードの仕組みとか、イメージギャラリーの仕組みとかですね。
最近は表示・非表示系をCssでやるようになってるので、クラスの付け替えだけで簡単にソレが実現できますよねー。

コード

;(function(global) {

  var ClassCycler = function(opt) {

    var timer,
    execCycle = (function() {
      var $item = opt.$targetElm,
      index = 0,
      max = $item.length;

      return function() {
        if (!opt.oneWay) {
          $item.removeClass(opt.cycleClassName);
        }   

        $item.eq(index).addClass(opt.cycleClassName);
        index = (++index === max) ? 0 : index;

        if (opt.oneWay &&  index === 0) {
          global.clearInterval(timer);
        }   
      };  

    }());

    // 即実行したいなら
    opt.startImmediate && execCycle();
    timer = global.setInterval(execCycle, opt.duration);

  };  
  global.ClassCycler = ClassCycler;

}(this.self || global));

短いので、引数はそのまま使っちゃいます。

使い方

<ul>
  <li class="js-shown-item"><img src="example1.png"/></li>
  <li class="js-shown-item"><img src="example2.png"/></li>
  <li class="js-shown-item"><img src="example3.png"/></li>
</ul>

こんな感じのHtmlを用意して、

.js-shown-item { opacity: 0; position: absolute; }
.js-shown-item.selected { opacity: 1; }

こんなCssを用意したら、

$(function(){
  new ClassCycler({
    $targetElm     : $('.js-shown-item'), // どの要素にクラスを付与したいか
    cycleClassName : 'selected',            // なんてクラス名を付与するのか
    duration       : 1000,                        // どんな間隔で付与するか
    startImmediate : true,                      // 初期状態から1つ目に付与するのか
    oneWay         : false                         // 付け替えじゃなくて、片道だけ付けて終わりたいか
  });
 });

こうするだけで、できあがり。
Cssで transition とかつければ、それだけでそれっぽく・・・！

っていうメモ。

#TODO: オプションの受け方が雑、Zepto/jQuery依存