質問編集履歴｜teratail（テラテイル）

5 タイトル変更

退会済みユーザー

2019/11/22 19:29 投稿

【jQuery質問】~~関数スコープを用いて~~スライドショーを実装する方法を教えてください

【jQuery質問】スライドショーを実装する方法を教えてください

グローバル変数でなく関数スコープ（ローカル変数）を用いてスライドショーを実装したいと考えてます。

```

var pages = [],

num = 0,

pagesNum = 0;

```

上の３行をグローバルに宣言した変数にすれば動作できるのですが、下のindex.htmlのようにローカルで閉じ込めると以下のエラーがでてしまいます。

```

Uncaught TypeError: pages.push is not a function

at slide (index.html:49)

at HTMLButtonElement.<anonymous> (index.html:58)

at HTMLButtonElement.dispatch (jquery.js:3058)

at HTMLButtonElement.eventHandle (jquery.js:2676)

slide @ index.html:49

(anonymous) @ index.html:58

dispatch @ jquery.js:3058

eventHandle @ jquery.js:2676

```

どんなコードを書けば良いか教えていただけると非常に嬉しいです。

参考にした[記事](https://qiita.com/KnoTrd/items/dd4c19b7fbd9a9c7dddc)です。

以下に私が書いたindex.htmlとstyle.cssになります。

グローバル変数を用いないという条件であれば、コードをこう書いたほうが良いというアドバイスをいただけたら非常に嬉しいです。

```

<!doctype html>

<html>

<head>

</head>

<body>

</ul>

</div>

"use strict";

$(function() {

(function(){

var pages = [],

num = 0,

pagesNum = 0;

})();

function slide(pages, num, pagesNum){

for(var i = 0; i < $('.slider-list li').length; i++){

if (i == 0) {

pages.push(0);

} else {

num += - $('.slider-list li').eq(i).width();

pages.push(num);

}

$('.slider-ctrl-btn').on('click', function(){

slide(pages, num, pagesNum);

if ($(this).data('ctrl') === 'next') {

var step = 1;

pagesNum = pagesNum + step;

if (pagesNum === pages.length) {

pagesNum = 0;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

else if ($(this).data('ctrl') === 'prev') {

var back = -1;

pagesNum = pagesNum + back;

if (pagesNum === -1) {

pagesNum = pages.length - 1;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

});

</script>

</body>

</html>

```

style.css

```

.slider-wrap {

width: 600px;

padding: 10px;

margin: 0 auto;

border-radius: 10px;

background-color: #DDD;

box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);

}

.slider-area {

position: relative;

width: 600px;

height: 300px;

background-color: #FFF;

overflow: hidden;

}

.slider-list {

position: absolute;

top: 0;

left: 0;

width: 2400px;

height: 300px;

}

.slider-list > li { float: left; }

.slider-ctrl-btn {

position: absolute;

top: 50%;

width: 30px;

height: 30px;

margin-top: -15px;

cursor: pointer;

border-radius: 15px;

background-color: rgba(255, 255, 255, 0.5);

}

.slider-ctrl-btn.prev { left: 30px; }

.slider-ctrl-btn.next { right: 30px; }

コード

```

jQuery

13579 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スライダー

251 questions

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

関数

1595 questions

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

スコープ

58 questions

スコープとは、プログラム内で変数名など、参照可能な有効範囲のことを指します。

4 タイトル変更

退会済みユーザー

2019/11/20 02:18 投稿

グローバル変数でなく関数スコープ（ローカル変数）を用いてスライドショーを実装したいと考えてます。

```

var pages = [],

num = 0,

pagesNum = 0;

```

上の３行をグローバルに宣言した変数にすれば動作できるのですが、下のindex.htmlのようにローカルで閉じ込めると以下のエラーがでてしまいます。

```

Uncaught TypeError: pages.push is not a function

at slide (index.html:49)

at HTMLButtonElement.<anonymous> (index.html:58)

at HTMLButtonElement.dispatch (jquery.js:3058)

at HTMLButtonElement.eventHandle (jquery.js:2676)

slide @ index.html:49

(anonymous) @ index.html:58

dispatch @ jquery.js:3058

eventHandle @ jquery.js:2676

```

どんなコードを書けば良いか教えていただけると非常に嬉しいです。

参考にした[記事](https://qiita.com/KnoTrd/items/dd4c19b7fbd9a9c7dddc)です。

以下に私が書いたindex.htmlとstyle.cssになります。

グローバル変数を用いないという条件であれば、コードをこう書いたほうが良いというアドバイスをいただけたら非常に嬉しいです。

```

<!doctype html>

<html>

<head>

</head>

<body>

</ul>

</div>

"use strict";

$(function() {

~~function slide(pages, num, pagesNum~~){

(function(){

var pages = [],

num = 0,

pagesNum = 0;

}

})();

function slide(pages, num, pagesNum){

for(var i = 0; i < $('.slider-list li').length; i++){

if (i == 0) {

pages.push(0);

} else {

num += - $('.slider-list li').eq(i).width();

pages.push(num);

}

$('.slider-ctrl-btn').on('click', function(){

slide(pages, num, pagesNum);

if ($(this).data('ctrl') === 'next') {

var step = 1;

pagesNum = pagesNum + step;

if (pagesNum === pages.length) {

pagesNum = 0;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

else if ($(this).data('ctrl') === 'prev') {

var back = -1;

pagesNum = pagesNum + back;

if (pagesNum === -1) {

pagesNum = pages.length - 1;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

});

</script>

</body>

</html>

```

style.css

```

.slider-wrap {

width: 600px;

padding: 10px;

margin: 0 auto;

border-radius: 10px;

background-color: #DDD;

box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);

}

.slider-area {

position: relative;

width: 600px;

height: 300px;

background-color: #FFF;

overflow: hidden;

}

.slider-list {

position: absolute;

top: 0;

left: 0;

width: 2400px;

height: 300px;

}

.slider-list > li { float: left; }

.slider-ctrl-btn {

position: absolute;

top: 50%;

width: 30px;

height: 30px;

margin-top: -15px;

cursor: pointer;

border-radius: 15px;

background-color: rgba(255, 255, 255, 0.5);

}

.slider-ctrl-btn.prev { left: 30px; }

.slider-ctrl-btn.next { right: 30px; }

コード

```

jQuery

13579 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スコープ

58 questions

スコープとは、プログラム内で変数名など、参照可能な有効範囲のことを指します。

スライダー

251 questions

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

関数

1595 questions

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

3 エラー文を追記しました

退会済みユーザー

2019/11/19 20:33 投稿

【jQuery質問】関数スコープを用いてスライドショーを実装したいです…

グローバル変数でなく関数スコープ（ローカル変数）を用いてスライドショーを実装したいと考えてます。

~~今はグローバルに変数を宣言してブラウザで動くのですが、関数スコープを用いて実装しようとしてもエラーがお手上げ状態です。~~

```

var pages = [],

num = 0,

pagesNum = 0;

```

この３行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。

上の３行をグローバルに宣言した変数にすれば動作できるのですが、下のindex.htmlのようにローカルで閉じ込めると以下のエラーがでてしまいます。

```

Uncaught TypeError: pages.push is not a function

at slide (index.html:49)

at HTMLButtonElement.<anonymous> (index.html:58)

at HTMLButtonElement.dispatch (jquery.js:3058)

at HTMLButtonElement.eventHandle (jquery.js:2676)

slide @ index.html:49

(anonymous) @ index.html:58

dispatch @ jquery.js:3058

eventHandle @ jquery.js:2676

```

どんなコードを書けば良いか教えていただけると非常に嬉しいです。

参考にした[記事](https://qiita.com/KnoTrd/items/dd4c19b7fbd9a9c7dddc)です。

以下に私が書いたindex.htmlとstyle.cssになります。

グローバル変数を用いないという条件であれば、コードをこう書いたほうが良いというアドバイスをいただけたら非常に嬉しいです。

```

<!doctype html>

<html>

<head>

</head>

<body>

</ul>

</div>

"use strict";

$(function() {

function slide(pages, num, pagesNum){

var pages = [],

num = 0,

pagesNum = 0;

}

function slide(pages, num, pagesNum){

for(var i = 0; i < $('.slider-list li').length; i++){

if (i == 0) {

pages.push(0);

} else {

num += - $('.slider-list li').eq(i).width();

pages.push(num);

}

$('.slider-ctrl-btn').on('click', function(){

slide(pages, num, pagesNum);

if ($(this).data('ctrl') === 'next') {

var step = 1;

pagesNum = pagesNum + step;

if (pagesNum === pages.length) {

pagesNum = 0;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

else if ($(this).data('ctrl') === 'prev') {

var back = -1;

pagesNum = pagesNum + back;

if (pagesNum === -1) {

pagesNum = pages.length - 1;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

});

</script>

</body>

</html>

```

style.css

```

.slider-wrap {

width: 600px;

padding: 10px;

margin: 0 auto;

border-radius: 10px;

background-color: #DDD;

box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);

}

.slider-area {

position: relative;

width: 600px;

height: 300px;

background-color: #FFF;

overflow: hidden;

}

.slider-list {

position: absolute;

top: 0;

left: 0;

width: 2400px;

height: 300px;

}

.slider-list > li { float: left; }

.slider-ctrl-btn {

position: absolute;

top: 50%;

width: 30px;

height: 30px;

margin-top: -15px;

cursor: pointer;

border-radius: 15px;

background-color: rgba(255, 255, 255, 0.5);

}

.slider-ctrl-btn.prev { left: 30px; }

.slider-ctrl-btn.next { right: 30px; }

コード

```

jQuery

13579 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スコープ

58 questions

スコープとは、プログラム内で変数名など、参照可能な有効範囲のことを指します。

スライダー

251 questions

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

関数

1595 questions

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

2 参考記事を追記

退会済みユーザー

2019/11/19 19:13 投稿

【jQuery質問】関数スコープを用いてスライドショーを実装したいです…

グローバル変数でなく関数スコープ（ローカル変数）を用いてスライドショーを実装したいと考えてます。

今はグローバルに変数を宣言してブラウザで動くのですが、関数スコープを用いて実装しようとしてもエラーがお手上げ状態です。

```

var pages = [],

num = 0,

pagesNum = 0;

```

この３行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。

参考にした[記事](https://qiita.com/KnoTrd/items/dd4c19b7fbd9a9c7dddc)です。

以下に私が書いたindex.htmlとstyle.cssになります。

グローバル変数を用いないという条件であれば、コードをこう書いたほうが良いというアドバイスをいただけたら非常に嬉しいです。

```

<!doctype html>

<html>

<head>

</head>

<body>

</ul>

</div>

"use strict";

$(function() {

var pages = [],

num = 0,

pagesNum = 0;

function slide(pages, num, pagesNum){

for(var i = 0; i < $('.slider-list li').length; i++){

if (i == 0) {

pages.push(0);

} else {

num += - $('.slider-list li').eq(i).width();

pages.push(num);

}

$('.slider-ctrl-btn').on('click', function(){

slide(pages, num, pagesNum);

if ($(this).data('ctrl') === 'next') {

var step = 1;

pagesNum = pagesNum + step;

if (pagesNum === pages.length) {

pagesNum = 0;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

else if ($(this).data('ctrl') === 'prev') {

var back = -1;

pagesNum = pagesNum + back;

if (pagesNum === -1) {

pagesNum = pages.length - 1;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

});

</script>

</body>

</html>

```

style.css

```

.slider-wrap {

width: 600px;

padding: 10px;

margin: 0 auto;

border-radius: 10px;

background-color: #DDD;

box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);

}

.slider-area {

position: relative;

width: 600px;

height: 300px;

background-color: #FFF;

overflow: hidden;

}

.slider-list {

position: absolute;

top: 0;

left: 0;

width: 2400px;

height: 300px;

}

.slider-list > li { float: left; }

.slider-ctrl-btn {

position: absolute;

top: 50%;

width: 30px;

height: 30px;

margin-top: -15px;

cursor: pointer;

border-radius: 15px;

background-color: rgba(255, 255, 255, 0.5);

}

.slider-ctrl-btn.prev { left: 30px; }

.slider-ctrl-btn.next { right: 30px; }

コード

```

jQuery

13579 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スコープ

58 questions

スコープとは、プログラム内で変数名など、参照可能な有効範囲のことを指します。

スライダー

251 questions

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

関数

1595 questions

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

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

退会済みユーザー

2019/11/19 18:51 投稿

【jQuery質問】関数スコープを用いてスライドショーを実装したいです…

グローバル変数でなく関数スコープ（ローカル変数）を用いてスライドショーを実装したいと考えてます。

今はグローバルに変数を宣言してブラウザで動くのですが、関数スコープを用いて実装しようとしてもエラーがお手上げ状態です。

```

var pages = [],

num = 0,

pagesNum = 0;

```

この３行のグローバル宣言した変数をローカルで閉じ込めるためにはどんなコードを書けば良いか教えていただけると非常に嬉しいです。

以下に私が書いた~~htmlファイル~~になります。

以下に私が書いたindex.htmlとstyle.cssになります。

```

<!doctype html>

<html>

<head>

~~<link rel="stylesheet" href="css/reset.css">~~

~~<link rel="stylesheet" href="css/base.css">~~

</head>

<body>

</ul>

</div>

"use strict";

$(function() {

var pages = [],

num = 0,

pagesNum = 0;

function slide(pages, num, pagesNum){

for(var i = 0; i < $('.slider-list li').length; i++){

if (i == 0) {

pages.push(0);

} else {

num += - $('.slider-list li').eq(i).width();

pages.push(num);

}

$('.slider-ctrl-btn').on('click', function(){

slide(pages, num, pagesNum);

if ($(this).data('ctrl') === 'next') {

var step = 1;

pagesNum = pagesNum + step;

if (pagesNum === pages.length) {

pagesNum = 0;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

else if ($(this).data('ctrl') === 'prev') {

var back = -1;

pagesNum = pagesNum + back;

if (pagesNum === -1) {

pagesNum = pages.length - 1;

}

$(".slider-list").animate({left: pages[pagesNum]},500)}

});

</script>

</body>

</html>

```

style.css

```

.slider-wrap {

width: 600px;

padding: 10px;

margin: 0 auto;

border-radius: 10px;

background-color: #DDD;

box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);

}

.slider-area {

position: relative;

width: 600px;

height: 300px;

background-color: #FFF;

overflow: hidden;

}

.slider-list {

position: absolute;

top: 0;

left: 0;

width: 2400px;

height: 300px;

}

.slider-list > li { float: left; }

.slider-ctrl-btn {

position: absolute;

top: 50%;

width: 30px;

height: 30px;

margin-top: -15px;

cursor: pointer;

border-radius: 15px;

background-color: rgba(255, 255, 255, 0.5);

}

.slider-ctrl-btn.prev { left: 30px; }

.slider-ctrl-btn.next { right: 30px; }

コード

```

jQuery

13579 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スコープ

58 questions

スコープとは、プログラム内で変数名など、参照可能な有効範囲のことを指します。

スライダー

251 questions

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

関数

1595 questions

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン