teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

ちょうせい

2021/08/25 05:08

投稿

yambejp
yambejp

スコア117914

answer CHANGED
@@ -13,7 +13,7 @@
13
13
  },100*i);
14
14
  }
15
15
  return loop;
16
- })(),3400);
16
+ })(),3500);
17
17
  </script>
18
18
 
19
19
  <style>
@@ -69,5 +69,5 @@
69
69
  document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('ani');
70
70
  },100*i);
71
71
  }
72
- },3400);
72
+ },3500);
73
73
  ```

2

ちょうせい

2021/08/25 05:08

投稿

yambejp
yambejp

スコア117914

answer CHANGED
@@ -49,4 +49,25 @@
49
49
  <li><img src="https://placehold.jp/000000/ffffff/150x150.png?text=4"></li>
50
50
  </ul>
51
51
  ```
52
- ※一部バグ修正
52
+ ※一部バグ修正
53
+
54
+ # 追加
55
+ 以下、最初1を3秒間(くらい)とめる
56
+ ```javascript
57
+ let count=1;
58
+ window.addEventListener('DOMContentLoaded', ()=>{
59
+ document.querySelector('#slide_wrapp li:first-child').classList.add('prev');
60
+ });
61
+ setInterval(()=>{
62
+ for(let i=0;i<5;i++){
63
+ setTimeout(()=>{
64
+ document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.remove('ani');
65
+ document.querySelector(`#slide_wrapp li.prev`)?.classList.remove('prev');
66
+ document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('prev');
67
+ count++;
68
+ if(count>4) count=1;
69
+ document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('ani');
70
+ },100*i);
71
+ }
72
+ },3400);
73
+ ```

1

調整

2021/08/25 05:05

投稿

yambejp
yambejp

スコア117914

answer CHANGED
@@ -5,11 +5,12 @@
5
5
  for(let i=0;i<5;i++){
6
6
  setTimeout(()=>{
7
7
  document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.remove('ani');
8
+ document.querySelector(`#slide_wrapp li.prev`)?.classList.remove('prev');
9
+ document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('prev');
8
10
  count++;
9
11
  if(count>4) count=1;
10
12
  document.querySelector(`#slide_wrapp li:nth-child(${count})`).classList.add('ani');
11
13
  },100*i);
12
- console.log(count);
13
14
  }
14
15
  return loop;
15
16
  })(),3400);
@@ -25,9 +26,12 @@
25
26
  top:0;
26
27
  }
27
28
  #slide_wrapp li.ani{
29
+ z-index:2;
30
+ }
31
+ #slide_wrapp li.prev{
28
32
  z-index:1;
29
33
  }
30
- #slide_wrapp li:not(.ani){
34
+ #slide_wrapp li:not(.ani):not(.prev){
31
35
  z-index:0;
32
36
  }
33
37
  #slide_wrapp li.ani img{
@@ -44,5 +48,5 @@
44
48
  <li><img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3"></li>
45
49
  <li><img src="https://placehold.jp/000000/ffffff/150x150.png?text=4"></li>
46
50
  </ul>
47
-
48
- ```
51
+ ```
52
+ ※一部バグ修正