フォントサイズの変更｜ 背景画像の変更｜ 画像の変更(サムネイル)｜ モーダル｜ 地図変更｜ ニュースティッカー

背景画像の変更
3秒間隔で切替を行う
間隔、フェードインフェードアウトの時間は調整可能

処理内容

背景用のDOMに　.cngArea　を指定。
同一階層の bgArea1 部分が切り替わります。
他のクラス(他背景クラス)の名前は任意ですが
JS部分を修正し、配列に入れなおす必要があります。

ボタン配置について
ulに.bgBtnArea
liにbgArea1Cng (bgArea1：bg用クラス名  Cng独立用文字列)
としています。
現在表示中のボタンの場合は動かないようになってます。


$(function(){

 //--------------------------------------------------------------
 // タイマーで背景クラスを差し替える
 //--------------------------------------------------------------
 var nowKey = 0,
   elemNum,
   classArr = new Array(),
   mathMax,
   intervalObj,
   bgCngFlg = 0,
   removeClass = "";

 //****************************************
 // 切替クラスを配列に入れる
 // ここを増減させることで数の変更が可能
 //****************************************
 classArr.push('bgArea1');
 classArr.push('bgArea2');
 classArr.push('bgArea3');

 for(i=0;classArr.length>i;i++)
 {
  removeClass+= classArr[i]+' ';
 }

 removeClass = removeClass.slice(0,-1);

 mathMax = parseInt(classArr.length);

 // 初期動作開始
 intervalObj = intervalStart();

 $('.bgBtnArea').find('li').bind('click',function()
 {
  var thisClass = $(this).attr('class').replace('Cng','');
  elemNum = $.inArray(thisClass,classArr);

  if(nowKey == elemNum)
  {
   console.log('同一');
   return false;
  }

  clearInterval(intervalObj);
  nowKey = elemNum;
  bgCng();
  intervalObj = intervalStart();
 })


 function intervalStart()
 {
  var Obj = setInterval(function()
  {
   bgCngFlg = 1;

   //*****************************
   // 次表示させるものを選定する
   //*****************************
   elemNum = Math.floor( Math.random() * mathMax );
   if(nowKey == elemNum)
   {
    if((parseInt(elemNum)+parseInt(1)) > (mathMax - 1) )
    {
     elemNum = 1;
    }
    else
    {
     elemNum = parseInt(elemNum)+parseInt(1);
    }
   }
   nowKey = elemNum;
   //*****************************
   // 切替処理
   //*****************************
   bgCng();
  },4200);

  return Obj;
 }


 function bgCng()
 {
  $('.cngArea').fadeOut(500,function()
  {
   $('.cngArea').removeClass(removeClass);
   $('.cngArea').addClass(classArr[elemNum]);
   $('.cngArea').fadeIn(500,function(){
    bgCngFlg = 0;
   });
  });
 }



});