//変数を定義 var num = 0; var navi_num = 0; var maxnum = 0; var item_current = 0; var slide_num = 0; var item_n = 0; var item_next = 1; var item_preview = 0; var interval; var flug = 0; //関数を定義 //次のアイテムを出力する function next_show() { if(item_current == maxnum){ item_n = maxnum; item_next = 0; item_current = 0; } else { item_n = item_current; item_next = item_current + 1; item_current ++; } nextprev(); paging_current(); //slide_list[item_n].style.cssText = "opacity:0;"; $('#item' + item_next).css("opacity",0); } //前のアイテムを出力する function preview_show() { if(item_current === 0){ item_n = maxnum; item_preview = maxnum; item_current = 0; } else { item_n = item_current; item_preview = item_current - 1; item_current --; } nextprev(); paging_current(); $('#item' + item_preview).css("opacity",0); } //アイテムをスライドさせる function item_slide_nxt() { $('#item' + item_current).css("display","none"); $('#item' + item_current).css("left","0px"); $('#item'+item_current).animate({ "left":"-30px", "opacity":"0" }, 500, function(){ $('#item' + item_current).css("left","0px"); $('#item' + item_current).css("display","none"); }); next_show(); $('#item' + item_next).css("display","block"); $('#item' + item_next).css("left","30px"); $('#item' + item_next).animate({ "left":"0", "opacity":"1" }, 500, function(){ $('#item' + item_next).css("display","block"); flug = 0; }); } function item_slide_prv() { $('#item' + item_current).css("display","none"); $('#item' + item_current).css("left","0px"); $('#item' + item_current).animate({ "left":"30px", "opacity":"0" }, 500, function(){ $('#item' + item_current).css("left","0px"); $('#item' + item_current).css("display","none"); }); preview_show(); $('#item' + item_preview).css("display","block"); $('#item' + item_preview).css("left","-30px"); $('#item' + item_preview).animate({ "left":"0", "opacity":"1" }, 500, function(){ $('#item' + item_preview).css("display","block"); flug = 0; }); } //指定の番号のアイテムを出力する function num_show(i) { return function(ev) { if (item_current != i) { item_n = item_current; //表示していたアイテムを消す $('#item' + item_n).css("display","none"); $('#item' + item_n).css("left","0px"); $('#item' + item_n).animate({ "opacity":"0" }, 500, function(){ $('#item' + item_n).css("display","none"); }); item_current = i; //選択されたアイテムを表示する $('#item' + item_current).css("display","block"); $('#item' + item_current).css("left","0px"); $('#item' + item_current).animate({ "opacity":"1" } ,500, function(){ $('#item' + item_current).css("display","block"); }); nextprev(); paging_current(); clear(); } } } //進む戻る表示非表示 function nextprev() { if (item_current === 0) { next.style.display = "block"; prev.style.display = "none"; } else if (item_current == maxnum) { next.style.display = "none"; prev.style.display = "block"; } else { next.style.display = "block"; prev.style.display = "block"; } } //clearInterval用 function clear(){ clearInterval(interval); interval = setInterval('item_slide_nxt()', 6000); } //ページングの現在位置を設定する function paging_current () { for(var j = 0; j < list.length; j++){ if (j == item_current) { navi_list[item_current].src = "css/img/on.png"; } else { navi_list[j].src = "css/img/off.png"; } } } //初期化 function slideme() { var slide = document.getElementById("slide"); var childs = slide.getElementsByTagName("div"); num = 0; navi_num = 0; maxnum = childs.length - 1; item_current = 0; list = new Array(); navi_list = new Array(); slide_list = new Array(); next = document.getElementById("next_move"); prev = document.getElementById("prev_move"); nextprev(); //自動遷移 interval = setInterval('item_slide_nxt()', 6000); next.addEventListener('click', function(event) { if (flug == 0) { flug = 1; item_slide_nxt(); clear(); } }, false); prev.addEventListener('click', function(event) { if (flug == 0) { flug = 1; item_slide_prv(); clear(); } }, false); for(var i = 0; i < childs.length; i++){ num = "itemnum" + i; navi_num = "navi_item" + i; slide_num = "item" + i; list[i] = document.getElementById(num); navi_list[i] = document.getElementById(navi_num); slide_list[i] = document.getElementById(slide_num); list[i].addEventListener('click', num_show(i), false); if (i != 0) { $('#'+slide_num).css("opacity",0); $('#'+slide_num).css("display","none"); } $('#item0').css("opacity",1); $('#item0').css("display","block"); } } //初期化 ie8 function slideme_ie8() { var slide = document.getElementById("slide"); var childs = slide.getElementsByTagName("div"); num = 0; navi_num = 0; maxnum = childs.length - 1; item_current = 0; list = new Array(); navi_list = new Array(); slide_list = new Array(); next = document.getElementById('next_move'); prev = document.getElementById('prev_move'); //自動遷移 interval = setInterval('item_slide_nxt()', 6000); next.attachEvent('onclick', function(event) { item_slide_nxt(); clear(); }, false); prev.attachEvent('onclick', function(event) { item_slide_prv(); clear(); }, false); for(var i = 0; i < childs.length; i++){ num = "itemnum" + i; navi_num = "navi_item" + i; slide_num = "item" + i; list[i] = document.getElementById(num); navi_list[i] = document.getElementById(navi_num); slide_list[i] = document.getElementById(slide_num); list[i].attachEvent('onclick', num_show(i), false); if (i != 0) { $('#'+slide_num).css("opacity",0); $('#'+slide_num).css("display","none"); } $('#item0').css("opacity",1); $('#item0').css("display","block"); } }