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

質問編集履歴

5

タイトル変更

2019/11/22 10:29

投稿

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

4

タイトル変更

2019/11/22 10:29

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 【jQuery質問】関数スコープを用いてスライドショーを実装したいで
1
+ 【jQuery質問】関数スコープを用いてスライドショーを実装する方法を教えてください
body CHANGED
@@ -49,11 +49,12 @@
49
49
  <script type="text/javascript">
50
50
  "use strict";
51
51
  $(function() {
52
- function slide(pages, num, pagesNum){
52
+ (function(){
53
53
  var pages = [],
54
54
  num = 0,
55
55
  pagesNum = 0;
56
- }
56
+ })();
57
+
57
58
  function slide(pages, num, pagesNum){
58
59
  for(var i = 0; i < $('.slider-list li').length; i++){
59
60
  if (i == 0) {

3

エラー文を追記しました

2019/11/19 17:18

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,22 @@
1
1
  グローバル変数でなく関数スコープ(ローカル変数)を用いてスライドショーを実装したいと考えてます。
2
- 今はグローバルに変数を宣言してブラウザで動くのですが、関数スコープを用いて実装しようとしてもエラーがお手上げ状態です。
3
2
  ```
4
3
  var pages = [],
5
4
  num = 0,
6
5
  pagesNum = 0;
7
6
  ```
7
+ 上の3行をグローバルに宣言した変数にすれば動作できるのですが、下のindex.htmlのようにローカルで閉じ込めると以下のエラーがでてしまいます。
8
+ ```
9
+ Uncaught TypeError: pages.push is not a function
10
+ at slide (index.html:49)
11
+ at HTMLButtonElement.<anonymous> (index.html:58)
12
+ at HTMLButtonElement.dispatch (jquery.js:3058)
13
+ at HTMLButtonElement.eventHandle (jquery.js:2676)
14
+ slide @ index.html:49
15
+ (anonymous) @ index.html:58
16
+ dispatch @ jquery.js:3058
17
+ eventHandle @ jquery.js:2676
18
+ ```
8
- この3行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。
19
+ どんなコードを書けば良いか教えていただけると非常に嬉しいです。
9
20
  参考にした[記事](https://qiita.com/KnoTrd/items/dd4c19b7fbd9a9c7dddc)です。
10
21
  以下に私が書いたindex.htmlとstyle.cssになります。
11
22
  グローバル変数を用いないという条件であれば、コードをこう書いたほうが良いというアドバイスをいただけたら非常に嬉しいです。
@@ -38,10 +49,11 @@
38
49
  <script type="text/javascript">
39
50
  "use strict";
40
51
  $(function() {
52
+ function slide(pages, num, pagesNum){
41
53
  var pages = [],
42
54
  num = 0,
43
55
  pagesNum = 0;
44
-
56
+ }
45
57
  function slide(pages, num, pagesNum){
46
58
  for(var i = 0; i < $('.slider-list li').length; i++){
47
59
  if (i == 0) {

2

参考記事を追記

2019/11/19 11:33

投稿

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

1

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

2019/11/19 10:13

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  pagesNum = 0;
7
7
  ```
8
8
  この3行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。
9
- 以下に私が書いたhtmlファイルになります。
9
+ 以下に私が書いたindex.htmlとstyle.cssになります。
10
10
  ```
11
11
  <!doctype html>
12
12
  <html>
@@ -15,8 +15,6 @@
15
15
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
16
16
  <meta name="format-detection" content="telephone=no">
17
17
  <title></title>
18
- <link rel="stylesheet" href="css/reset.css">
19
- <link rel="stylesheet" href="css/base.css">
20
18
  <link rel="stylesheet" href="css/style.css">
21
19
  </head>
22
20
  <body>
@@ -24,10 +22,10 @@
24
22
  <div class="slider-wrap">
25
23
  <div class="slider-area">
26
24
  <ul class="slider-list clearfix">
27
- <li><img src="img/1.jpg" alt=""></li>
28
- <li><img src="img/2.jpg" alt=""></li>
25
+ <li><img src="http://placehold.jp/150x150.png" alt=""></li>
26
+ <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li>
29
- <li><img src="img/3.jpg" alt=""></li>
27
+ <li><img src="http://placehold.jp/150x150.png" alt=""></li>
30
- <li><img src="img/4.jpg" alt=""></li>
28
+ <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li>
31
29
  </ul>
32
30
  <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
33
31
  <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
@@ -79,4 +77,44 @@
79
77
  </script>
80
78
  </body>
81
79
  </html>
80
+ ```
81
+
82
+ style.css
83
+ ```
84
+ .slider-wrap {
85
+ width: 600px;
86
+ padding: 10px;
87
+ margin: 0 auto;
88
+ border-radius: 10px;
89
+ background-color: #DDD;
90
+ box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
91
+ }
92
+ .slider-area {
93
+ position: relative;
94
+ width: 600px;
95
+ height: 300px;
96
+ background-color: #FFF;
97
+ overflow: hidden;
98
+ }
99
+ .slider-list {
100
+ position: absolute;
101
+ top: 0;
102
+ left: 0;
103
+ width: 2400px;
104
+ height: 300px;
105
+ }
106
+ .slider-list > li { float: left; }
107
+ .slider-ctrl-btn {
108
+ position: absolute;
109
+ top: 50%;
110
+ width: 30px;
111
+ height: 30px;
112
+ margin-top: -15px;
113
+ cursor: pointer;
114
+ border-radius: 15px;
115
+ background-color: rgba(255, 255, 255, 0.5);
116
+ }
117
+ .slider-ctrl-btn.prev { left: 30px; }
118
+ .slider-ctrl-btn.next { right: 30px; }
119
+ コード
82
120
  ```