$(function(){ //CT スライドのフェードで切り替わる速さ //sT 次のスライドまでの時間 var cT = 0, sT = 4000; //index 何番目のスライドかを計測する変数 //$img スライドさせる変数の定義 //imgLen 変数 スライドの枚数を格納 var index = 0, $img = $('#slide_corner').children('div'); $img2 = $('#slide_suite').children('div'); $img3 = $('#slide_deluxe').children('div'); $img4= $('#slide_superiore').children('div'); $img5 = $('#slide_premiere').children('div'); $img6 = $('#slide_universal').children('div'); $img7 = $('#slide_standard').children('div'); $img_thum = $('#thum_suite').children('.slide'), imgLen = $img_thum.length; $img_thum2 = $('#thum_deluxe').children('.slide'), imgLen = $img_thum2.length; $img_thum3 = $('#thum_superiore').children('.slide'), imgLen = $img_thum3.length; $img_thum4 = $('#thum_premiere').children('.slide'), imgLen = $img_thum4.length; //最初の画像以外display:noneにする $img.not(':first').css('display','none'); $img2.not(':first').css('display','none'); $img3.not(':first').css('display','none'); $img4.not(':first').css('display','none'); $img5.not(':first').css('display','none'); $img6.not(':first').css('display','none'); $img7.not(':first').css('display','none'); $img_thum.not(':first').css('display','none'); $img_thum2.not(':first').css('display','none'); $img_thum3.not(':first').css('display','none'); $img_thum4.not(':first').css('display','none'); //サムネイルを画像の枚数分（ imgLen ）生成 for (var i=0; i'), $('#thum_d ul').append('

'), $('#thum_s ul').append('

'), $('#thum_p ul').append('

'); } //var $tN　$('#thum li'); Jqueryオブジェクトに変換し変数の定義 var $tN = $('#thum li'); var $tNd = $('#thum_d li'); var $tNs = $('#thum_s li'); var $tNp = $('#thum_p li'); //最初のサムネイルにだけアクティブのクラスを付ける $tN.first().addClass('active'); $tNd.first().addClass('active'); $tNs.first().addClass('active'); $tNp.first().addClass('active'); //サムネイルがクリックされたときの動作 $tN.add($tNd).add($tNs).add($tNp).click(function(){ $img_thum.stop(); $img_thum2.stop(); $img_thum3.stop(); $img_thum4.stop(); //下で定義している関数 slides の動作を停止させる clearInterval(slides); //クリックされたサムネイルにクラス「active」を追加。siblings()を使用してクリックされたもの以外のすべての兄弟要素からクラスactiveを削除 $(this).addClass('active').siblings().removeClass('active'); //number クリックされたサムネイルの番号を取得（表示されているサムネイルの左から0,1,2,3の順番） //$choiceImgにnumberで取得した番号からその番号から+1した枚数目のスライド画像を代入 //numberが0なら1枚目、1なら2枚目のスライド画像が「$choiceImgの変数」に入る var number = $(this).index() $choiceImg = $img_thum.eq(number); $choiceImg2 = $img_thum2.eq(number); $choiceImg3 = $img_thum3.eq(number); $choiceImg4 = $img_thum4.eq(number); //indexに(number) % imgLenの余りを代入 ...計算後のnumberとindexの値がすべて同じなので余りの計算をする意味不明です。 index = (number) % imgLen; //$choiceImg以外のすべての兄弟要素をフェードアウトする $choiceImg.siblings().stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); //$choiceImgをフェードインする $choiceImg.css({'opacity': 1}).stop().fadeIn(); $choiceImg2.siblings().stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); //$choiceImgをフェードインする $choiceImg2.css({'opacity': 1}).stop().fadeIn(); $choiceImg3.siblings().stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); //$choiceImgをフェードインする $choiceImg4.css({'opacity': 1}).stop().fadeIn(); //start()関数の記述を実行（スライドを実行） start(); }); var $btn_next = $('#btn_next'), $btn_prev = $('#btn_prev'); $btn_next.click(function(){ //次のスライドの値を代入 var next = (index +1) % imgLen; //現在アクティブ状態の次のサムネイルをクリックする $tN.eq(next).click(); $tNd.eq(next).click(); $tNs.eq(next).click(); $tNp.eq(next).click(); }); $btn_prev.click(function(){ //前のスライドの値を代入 var prev = (index -1) % imgLen; //現在アクティブ状態の前のサムネイルをクリックする $tN.eq(prev).click(); $tNd.eq(prev).click(); $tNs.eq(prev).click(); $tNp.eq(prev).click(); }); function start(){ slides = setInterval(function(){ //次のスライド画像、サムネイルの番号を変数に格納 %で計算（左を右で割った余り）することで最後のスライドをカバー、最後のスライドの倍nextには0が代入される var next = (index +1) % imgLen; //全てのサムネイルのクラスactiveを削除nextで取得した番号のサムネイルにアクティブを追加 $tN.removeClass('active').eq(next).addClass('active'); $tNd.removeClass('active').eq(next).addClass('active'); $tNs.removeClass('active').eq(next).addClass('active'); $tNp.removeClass('active').eq(next).addClass('active'); //現在の表示中のスライドをフェードアウトにし、次に表示するスライドをフェードインへ $img.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img2.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img2.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img3.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img3.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img4.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img4.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img5.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img5.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img6.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img6.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img7.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img7.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img_thum.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img_thum.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img_thum2.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img_thum2.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img_thum3.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img_thum3.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); $img_thum4.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img_thum4.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); index = next; },sT + cT); }; //start()関数の記述を実行（スライドを実行） start(); }); //////////////////////////TOPスライド////////////////////////// $(function(){ //CT スライドのフェードで切り替わる速さ //sT 次のスライドまでの時間 var cT = 0, sT = 4000; //index 何番目のスライドかを計測する変数 //$img スライドさせる変数の定義 //imgLen 変数 スライドの枚数を格納 var index = 0, $img_main = $('#slide').children('div'), imgLen_main = $img_main.length; //最初の画像以外display:noneにする $img_main.not(':first').css('display','none'); //サムネイルを画像の枚数分（ imgLen ）生成 for (var i=0; i'); } //var $tN　$('#thum li'); Jqueryオブジェクトに変換し変数の定義 var $tNmain = $('#thum_main li'); //最初のサムネイルにだけアクティブのクラスを付ける $tNmain.first().addClass('active'); //サムネイルがクリックされたときの動作 $tNmain.click(function(){ //現在動作中のアニメーション処理を全て中止 $img_main.stop(); //下で定義している関数 slides の動作を停止させる clearInterval(slides); //クリックされたサムネイルにクラス「active」を追加。siblings()を使用してクリックされたもの以外のすべての兄弟要素からクラスactiveを削除 $(this).addClass('active').siblings().removeClass('active'); //number クリックされたサムネイルの番号を取得（表示されているサムネイルの左から0,1,2,3の順番） //$choiceImgにnumberで取得した番号からその番号から+1した枚数目のスライド画像を代入 //numberが0なら1枚目、1なら2枚目のスライド画像が「$choiceImgの変数」に入る var number = $(this).index() $choiceImg_main = $img_main.eq(number); //indexに(number) % imgLen_mainの余りを代入 ...計算後のnumberとindexの値がすべて同じなので余りの計算をする意味不明です。 index = (number) % imgLen_main; //$choiceImg以外のすべての兄弟要素をフェードアウトする $choiceImg_main.siblings().stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); //$choiceImg_mainをフェードインする $choiceImg_main.css({'opacity': 1}).stop().fadeIn(); //start()関数の記述を実行（スライドを実行） start(); }); var $btn_next = $('#btn_next'), $btn_prev = $('#btn_prev'); $btn_next.click(function(){ //次のスライドの値を代入 var next = (index +1) % imgLen_main; //現在アクティブ状態の次のサムネイルをクリックする $tNmain.eq(next).click(); }); $btn_prev.click(function(){ //前のスライドの値を代入 var prev = (index -1) % imgLen_main; //現在アクティブ状態の前のサムネイルをクリックする $tNmain.eq(prev).click(); }); function start(){ slides = setInterval(function(){ //次のスライド画像、サムネイルの番号を変数に格納 %で計算（左を右で割った余り）することで最後のスライドをカバー、最後のスライドの倍nextには0が代入される var next = (index +1) % imgLen_main; //全てのサムネイルのクラスactiveを削除nextで取得した番号のサムネイルにアクティブを追加 $tNmain.removeClass('active').eq(next).addClass('active'); //現在の表示中のスライドをフェードアウトにし、次に表示するスライドをフェードインへ $img_main.eq(index).stop().fadeOut( 'cT', function(){ $(this).animate({'opacity': 0}); } ); $img_main.eq(next).stop().css({'opacity': 1}).stop().fadeIn(); index = next; },sT + cT); }; //start()関数の記述を実行（スライドを実行） start(); }); /////////////////バナー////////////////////// setTimeout(function() { $('#htlSide-A').css("display", "block"); }, 100); $(function() { var cT = 1000, sT = 2000; var index = 0, $img = $('.box_bnr_slide').children('.slide'), imgLen = $img.length; $img.not(':first').css('opacity', '0'); for (var i = 0; i < imgLen; i++) { $('.box_bnr_thum ul').append('

'); } var $tN = $('.box_bnr_thum li'); $tN.first().addClass('active'); $tN.click(function() { $img.stop(); clearInterval(slides); $(this).addClass('active').siblings().removeClass('active'); var number = $(this).index(), $choiceImg = $img.eq(number); index = (number) % imgLen; $choiceImg.siblings().animate({ opacity: 0 }, cT).css('z-index', '-999'); $choiceImg.animate({ opacity: 1 }, cT).css('z-index', '1'); start(); }); function start() { slides = setInterval(function() { var next = (index + 1) % imgLen; $tN.removeClass('active').eq(next).addClass('active'); $img.eq(index).animate({ 'opacity': '0' }, cT).css('z-index', '-999'); $img.eq(next).animate({ 'opacity': '1' }, cT).css('z-index', '1'); index = next; }, sT + cT); }; start(); });