【jQuery】タブメニューの自動切り替え

autochange.js

$.fn.autoChange = function (config) {

  var options = $.extend({
    type: 'repaet',
    timeout: 3000,
    selector: 'div.content > p'
  }, config);


  // 指定した要素の子要素を取得
  var element = $(this).children();

  // 要素を切り替えるスクリプト
  var change = function () {

    // activeクラスが設定されている要素のインデックス番号を取得
    var current = $(element).index($(".active"));

    //　次のインデックス番号を設定
    var next = current + 1;

    // activeクラスを削除
    $(element).removeClass("active");

    switch(options.type) {
      case 'repeat': // リピートする場合
        $(options.selector).hide();
        if ((next + 1) > element.length) {
          $(element[0]).addClass("active");
          $($("a", element[0]).attr('href')).show('slow');
        } else {
          $(element[next]).addClass("active");
          $($("a", element[next]).attr('href')).show('slow');
        }
        break;
      case 'stop': // 最後の要素でストップする場合
        if ((next + 1) > element.length) {
          return;
        } else {
          $(options.selector).hide();
        }
        break;
    }
  };

  // コンテンツ上ににカーソルがある場合停止
  $(options.selector).hover(
    function () {
      clearInterval(timer);
    },
    function () {
      timer = setInterval(function () {
        change();
      }, options.timeout);
    }
  );

  // 設定時間毎にスクリプトを実行
  var timer = setInterval(function () {
    change();
  }, options.timeout);
};