トップページスライド画像

site_frame.tplに下記を追加

html/jsフォルダーにtoppage.js追加

↓ toppage.js ↓
$(function (){
//設定
var active=”active”,interval=5000;
var index=0, timerId=null;
var tabs=$(“#thumbBtn > li”), content=$(“#view > p”), cap=$(“#caption > li”);

//クラスの付与
tabs.each(function(){$(this).removeClass(active);});
content.hide();
cap.hide();
tabs.eq(0).addClass(active);
content.eq(0).fadeIn(2000);
cap.eq(0).fadeIn(1000);

//クリックされたらactiveというクラスを付与、
//切り替え、タイマーをリセット
tabs.click(function(){
if($(this).hasClass(“active”)) return;
if(timerId) clearInterval(timerId),timerId=null;
change(tabs.index(this));
setTimer();
return false;
});

//タイマー
setTimer();
function setTimer(){
timerId=setTimeout(timeProcess,interval);
return false;
}

function timeProcess(){
change((index+1)%tabs.length);
timerId=setTimeout(arguments.callee,interval);
}

//切り替え
function change(t_index){
tabs.eq(index).removeClass(active);
tabs.eq(t_index).addClass(active);
//fadeout
setTimeout(function(){
content.eq(index).stop(true, true).fadeOut(2000),
cap.eq(index).stop(true, true).hide()
;}, 300);
//fadein
setTimeout(function(){
index=t_index;
content.eq(index).fadeIn(2000),
cap.eq(index).fadeIn(2000)
;}, 400)
}
});

トップページ詳細編集で以下を追加