Brak opisu
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

slideme.js 5.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. //変数を定義
  2. var num = 0;
  3. var navi_num = 0;
  4. var maxnum = 0;
  5. var item_current = 0;
  6. var slide_num = 0;
  7. var item_n = 0;
  8. var item_next = 1;
  9. var item_preview = 0;
  10. var interval;
  11. var flug = 0;
  12. //関数を定義
  13. //次のアイテムを出力する
  14. function next_show() {
  15. if(item_current == maxnum){
  16. item_n = maxnum;
  17. item_next = 0;
  18. item_current = 0;
  19. } else {
  20. item_n = item_current;
  21. item_next = item_current + 1;
  22. item_current ++;
  23. }
  24. nextprev();
  25. paging_current();
  26. //slide_list[item_n].style.cssText = "opacity:0;";
  27. $('#item' + item_next).css("opacity",0);
  28. }
  29. //前のアイテムを出力する
  30. function preview_show() {
  31. if(item_current === 0){
  32. item_n = maxnum;
  33. item_preview = maxnum;
  34. item_current = 0;
  35. } else {
  36. item_n = item_current;
  37. item_preview = item_current - 1;
  38. item_current --;
  39. }
  40. nextprev();
  41. paging_current();
  42. $('#item' + item_preview).css("opacity",0);
  43. }
  44. //アイテムをスライドさせる
  45. function item_slide_nxt() {
  46. $('#item' + item_current).css("display","none");
  47. $('#item' + item_current).css("left","0px");
  48. $('#item'+item_current).animate({
  49. "left":"-30px",
  50. "opacity":"0"
  51. }, 500, function(){
  52. $('#item' + item_current).css("left","0px");
  53. $('#item' + item_current).css("display","none");
  54. });
  55. next_show();
  56. $('#item' + item_next).css("display","block");
  57. $('#item' + item_next).css("left","30px");
  58. $('#item' + item_next).animate({
  59. "left":"0",
  60. "opacity":"1"
  61. }, 500, function(){
  62. $('#item' + item_next).css("display","block");
  63. flug = 0;
  64. });
  65. }
  66. function item_slide_prv() {
  67. $('#item' + item_current).css("display","none");
  68. $('#item' + item_current).css("left","0px");
  69. $('#item' + item_current).animate({
  70. "left":"30px",
  71. "opacity":"0"
  72. }, 500, function(){
  73. $('#item' + item_current).css("left","0px");
  74. $('#item' + item_current).css("display","none");
  75. });
  76. preview_show();
  77. $('#item' + item_preview).css("display","block");
  78. $('#item' + item_preview).css("left","-30px");
  79. $('#item' + item_preview).animate({
  80. "left":"0",
  81. "opacity":"1"
  82. }, 500, function(){
  83. $('#item' + item_preview).css("display","block");
  84. flug = 0;
  85. });
  86. }
  87. //指定の番号のアイテムを出力する
  88. function num_show(i) {
  89. return function(ev) {
  90. if (item_current != i) {
  91. item_n = item_current;
  92. //表示していたアイテムを消す
  93. $('#item' + item_n).css("display","none");
  94. $('#item' + item_n).css("left","0px");
  95. $('#item' + item_n).animate({
  96. "opacity":"0"
  97. }, 500, function(){
  98. $('#item' + item_n).css("display","none");
  99. });
  100. item_current = i;
  101. //選択されたアイテムを表示する
  102. $('#item' + item_current).css("display","block");
  103. $('#item' + item_current).css("left","0px");
  104. $('#item' + item_current).animate({
  105. "opacity":"1"
  106. } ,500, function(){
  107. $('#item' + item_current).css("display","block");
  108. });
  109. nextprev();
  110. paging_current();
  111. clear();
  112. }
  113. }
  114. }
  115. //進む戻る表示非表示
  116. function nextprev() {
  117. if (item_current === 0) {
  118. next.style.display = "block";
  119. prev.style.display = "none";
  120. } else if (item_current == maxnum) {
  121. next.style.display = "none";
  122. prev.style.display = "block";
  123. } else {
  124. next.style.display = "block";
  125. prev.style.display = "block";
  126. }
  127. }
  128. //clearInterval用
  129. function clear(){
  130. clearInterval(interval);
  131. interval = setInterval('item_slide_nxt()', 6000);
  132. }
  133. //ページングの現在位置を設定する
  134. function paging_current () {
  135. for(var j = 0; j < list.length; j++){
  136. if (j == item_current) {
  137. navi_list[item_current].src = "css/img/on.png";
  138. } else {
  139. navi_list[j].src = "css/img/off.png";
  140. }
  141. }
  142. }
  143. //初期化
  144. function slideme() {
  145. var slide = document.getElementById("slide");
  146. var childs = slide.getElementsByTagName("div");
  147. num = 0;
  148. navi_num = 0;
  149. maxnum = childs.length - 1;
  150. item_current = 0;
  151. list = new Array();
  152. navi_list = new Array();
  153. slide_list = new Array();
  154. next = document.getElementById("next_move");
  155. prev = document.getElementById("prev_move");
  156. nextprev();
  157. //自動遷移
  158. interval = setInterval('item_slide_nxt()', 6000);
  159. next.addEventListener('click', function(event) {
  160. if (flug == 0) {
  161. flug = 1;
  162. item_slide_nxt();
  163. clear();
  164. }
  165. }, false);
  166. prev.addEventListener('click', function(event) {
  167. if (flug == 0) {
  168. flug = 1;
  169. item_slide_prv();
  170. clear();
  171. }
  172. }, false);
  173. for(var i = 0; i < childs.length; i++){
  174. num = "itemnum" + i;
  175. navi_num = "navi_item" + i;
  176. slide_num = "item" + i;
  177. list[i] = document.getElementById(num);
  178. navi_list[i] = document.getElementById(navi_num);
  179. slide_list[i] = document.getElementById(slide_num);
  180. list[i].addEventListener('click', num_show(i), false);
  181. if (i != 0) {
  182. $('#'+slide_num).css("opacity",0);
  183. $('#'+slide_num).css("display","none");
  184. }
  185. $('#item0').css("opacity",1);
  186. $('#item0').css("display","block");
  187. }
  188. }
  189. //初期化 ie8
  190. function slideme_ie8() {
  191. var slide = document.getElementById("slide");
  192. var childs = slide.getElementsByTagName("div");
  193. num = 0;
  194. navi_num = 0;
  195. maxnum = childs.length - 1;
  196. item_current = 0;
  197. list = new Array();
  198. navi_list = new Array();
  199. slide_list = new Array();
  200. next = document.getElementById('next_move');
  201. prev = document.getElementById('prev_move');
  202. //自動遷移
  203. interval = setInterval('item_slide_nxt()', 6000);
  204. next.attachEvent('onclick', function(event) {
  205. item_slide_nxt();
  206. clear();
  207. }, false);
  208. prev.attachEvent('onclick', function(event) {
  209. item_slide_prv();
  210. clear();
  211. }, false);
  212. for(var i = 0; i < childs.length; i++){
  213. num = "itemnum" + i;
  214. navi_num = "navi_item" + i;
  215. slide_num = "item" + i;
  216. list[i] = document.getElementById(num);
  217. navi_list[i] = document.getElementById(navi_num);
  218. slide_list[i] = document.getElementById(slide_num);
  219. list[i].attachEvent('onclick', num_show(i), false);
  220. if (i != 0) {
  221. $('#'+slide_num).css("opacity",0);
  222. $('#'+slide_num).css("display","none");
  223. }
  224. $('#item0').css("opacity",1);
  225. $('#item0').css("display","block");
  226. }
  227. }