teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【jQuery質問】スライドショーを実装する方法を教えてください

編集履歴

質問編集履歴

5

タイトル変更

2019/11/22 10:29

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 【jQuery質問】関数スコープを用いてスライドショーを実装する方法を教えてください
1
+ 【jQuery質問】スライドショーを実装する方法を教えてください
test CHANGED
File without changes

4

タイトル変更

2019/11/22 10:29

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 【jQuery質問】関数スコープを用いてスライドショーを実装したいです…
1
+ 【jQuery質問】関数スコープを用いてスライドショーを実装する方法を教えてください
test CHANGED
@@ -100,78 +100,80 @@
100
100
 
101
101
  $(function() {
102
102
 
103
+ (function(){
104
+
105
+ var pages = [],
106
+
107
+ num = 0,
108
+
109
+ pagesNum = 0;
110
+
111
+ })();
112
+
113
+
114
+
103
115
  function slide(pages, num, pagesNum){
104
116
 
105
- var pages = [],
117
+ for(var i = 0; i < $('.slider-list li').length; i++){
106
-
118
+
107
- num = 0,
119
+ if (i == 0) {
108
-
120
+
109
- pagesNum = 0;
121
+ pages.push(0);
122
+
123
+ } else {
124
+
125
+ num += - $('.slider-list li').eq(i).width();
126
+
127
+ pages.push(num);
128
+
129
+ }
130
+
131
+ }
110
132
 
111
133
  }
112
134
 
135
+
136
+
137
+ $('.slider-ctrl-btn').on('click', function(){
138
+
113
- function slide(pages, num, pagesNum){
139
+ slide(pages, num, pagesNum);
114
-
140
+
141
+
142
+
115
- for(var i = 0; i < $('.slider-list li').length; i++){
143
+ if ($(this).data('ctrl') === 'next') {
116
-
144
+
117
- if (i == 0) {
145
+ var step = 1;
146
+
118
-
147
+ pagesNum = pagesNum + step;
148
+
149
+
150
+
151
+ if (pagesNum === pages.length) {
152
+
119
- pages.push(0);
153
+ pagesNum = 0;
120
-
121
- } else {
122
-
123
- num += - $('.slider-list li').eq(i).width();
124
-
125
- pages.push(num);
126
-
127
- }
128
154
 
129
155
  }
130
156
 
131
- }
157
+
132
-
133
-
134
-
158
+
135
- $('.slider-ctrl-btn').on('click', function(){
159
+ $(".slider-list").animate({left: pages[pagesNum]},500)}
136
-
137
- slide(pages, num, pagesNum);
160
+
138
-
139
-
140
-
161
+
162
+
141
- if ($(this).data('ctrl') === 'next') {
163
+ else if ($(this).data('ctrl') === 'prev') {
142
-
164
+
143
- var step = 1;
165
+ var back = -1;
144
-
166
+
145
- pagesNum = pagesNum + step;
167
+ pagesNum = pagesNum + back;
168
+
169
+
170
+
146
-
171
+ if (pagesNum === -1) {
147
-
148
-
172
+
149
- if (pagesNum === pages.length) {
173
+ pagesNum = pages.length - 1;
150
-
151
- pagesNum = 0;
152
174
 
153
175
  }
154
176
 
155
-
156
-
157
- $(".slider-list").animate({left: pages[pagesNum]},500)}
158
-
159
-
160
-
161
- else if ($(this).data('ctrl') === 'prev') {
162
-
163
- var back = -1;
164
-
165
- pagesNum = pagesNum + back;
166
-
167
-
168
-
169
- if (pagesNum === -1) {
170
-
171
- pagesNum = pages.length - 1;
172
-
173
- }
174
-
175
177
  $(".slider-list").animate({left: pages[pagesNum]},500)}
176
178
 
177
179
  });

3

エラー文を追記しました

2019/11/19 17:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,5 @@
1
1
  グローバル変数でなく関数スコープ（ローカル変数）を用いてスライドショーを実装したいと考えてます。
2
2
 
3
- 今はグローバルに変数を宣言してブラウザで動くのですが、関数スコープを用いて実装しようとしてもエラーがお手上げ状態です。
4
-
5
3
  ```
6
4
 
7
5
  var pages = [],
@@ -12,7 +10,31 @@
12
10
 
13
11
  ```
14
12
 
13
+ 上の３行をグローバルに宣言した変数にすれば動作できるのですが、下のindex.htmlのようにローカルで閉じ込めると以下のエラーがでてしまいます。
14
+
15
+ ```
16
+
17
+ Uncaught TypeError: pages.push is not a function
18
+
19
+ at slide (index.html:49)
20
+
21
+ at HTMLButtonElement.<anonymous> (index.html:58)
22
+
23
+ at HTMLButtonElement.dispatch (jquery.js:3058)
24
+
25
+ at HTMLButtonElement.eventHandle (jquery.js:2676)
26
+
27
+ slide @ index.html:49
28
+
29
+ (anonymous) @ index.html:58
30
+
31
+ dispatch @ jquery.js:3058
32
+
33
+ eventHandle @ jquery.js:2676
34
+
35
+ ```
36
+
15
- この３行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。
37
+ どんなコードを書けば良いか教えていただけると非常に嬉しいです。
16
38
 
17
39
  参考にした[記事](https://qiita.com/KnoTrd/items/dd4c19b7fbd9a9c7dddc)です。
18
40
 
@@ -78,13 +100,15 @@
78
100
 
79
101
  $(function() {
80
102
 
103
+ function slide(pages, num, pagesNum){
104
+
81
105
  var pages = [],
82
106
 
83
107
  num = 0,
84
108
 
85
109
  pagesNum = 0;
86
110
 
87
-
111
+ }
88
112
 
89
113
  function slide(pages, num, pagesNum){
90
114
 

2

参考記事を追記

2019/11/19 11:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,8 +14,12 @@
14
14
 
15
15
  この３行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。
16
16
 
17
+ 参考にした[記事](https://qiita.com/KnoTrd/items/dd4c19b7fbd9a9c7dddc)です。
18
+
17
19
  以下に私が書いたindex.htmlとstyle.cssになります。
18
20
 
21
+ グローバル変数を用いないという条件であれば、コードをこう書いたほうが良いというアドバイスをいただけたら非常に嬉しいです。
22
+
19
23
  ```
20
24
 
21
25
  <!doctype html>

1

index.htmlの修正とstyle.cssを追記しました。画像もplacehold.jpを用いました。

2019/11/19 10:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  この３行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。
16
16
 
17
- 以下に私が書いたhtmlファイルになります。
17
+ 以下に私が書いたindex.htmlとstyle.cssになります。
18
18
 
19
19
  ```
20
20
 
@@ -32,10 +32,6 @@
32
32
 
33
33
  <title></title>
34
34
 
35
- <link rel="stylesheet" href="css/reset.css">
36
-
37
- <link rel="stylesheet" href="css/base.css">
38
-
39
35
  <link rel="stylesheet" href="css/style.css">
40
36
 
41
37
  </head>
@@ -50,13 +46,13 @@
50
46
 
51
47
  <ul class="slider-list clearfix">
52
48
 
53
- <li><img src="img/1.jpg" alt=""></li>
54
-
55
- <li><img src="img/2.jpg" alt=""></li>
49
+ <li><img src="http://placehold.jp/150x150.png" alt=""></li>
50
+
56
-
51
+ <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li>
52
+
57
- <li><img src="img/3.jpg" alt=""></li>
53
+ <li><img src="http://placehold.jp/150x150.png" alt=""></li>
58
-
54
+
59
- <li><img src="img/4.jpg" alt=""></li>
55
+ <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li>
60
56
 
61
57
  </ul>
62
58
 
@@ -161,3 +157,83 @@
161
157
  </html>
162
158
 
163
159
  ```
160
+
161
+
162
+
163
+ style.css
164
+
165
+ ```
166
+
167
+ .slider-wrap {
168
+
169
+ width: 600px;
170
+
171
+ padding: 10px;
172
+
173
+ margin: 0 auto;
174
+
175
+ border-radius: 10px;
176
+
177
+ background-color: #DDD;
178
+
179
+ box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
180
+
181
+ }
182
+
183
+ .slider-area {
184
+
185
+ position: relative;
186
+
187
+ width: 600px;
188
+
189
+ height: 300px;
190
+
191
+ background-color: #FFF;
192
+
193
+ overflow: hidden;
194
+
195
+ }
196
+
197
+ .slider-list {
198
+
199
+ position: absolute;
200
+
201
+ top: 0;
202
+
203
+ left: 0;
204
+
205
+ width: 2400px;
206
+
207
+ height: 300px;
208
+
209
+ }
210
+
211
+ .slider-list > li { float: left; }
212
+
213
+ .slider-ctrl-btn {
214
+
215
+ position: absolute;
216
+
217
+ top: 50%;
218
+
219
+ width: 30px;
220
+
221
+ height: 30px;
222
+
223
+ margin-top: -15px;
224
+
225
+ cursor: pointer;
226
+
227
+ border-radius: 15px;
228
+
229
+ background-color: rgba(255, 255, 255, 0.5);
230
+
231
+ }
232
+
233
+ .slider-ctrl-btn.prev { left: 30px; }
234
+
235
+ .slider-ctrl-btn.next { right: 30px; }
236
+
237
+ コード
238
+
239
+ ```