teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【jQuery】スライドショーを右側に動かしたい

編集履歴

質問編集履歴

8

内容編集

2019/11/22 10:50

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 【jQuery】ローカル変数を用いてスライドショーを完成させたい
1
+ 【jQuery】スライドショーを右側に動かしたい
body CHANGED
@@ -1,4 +1,3 @@
1
- 現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいです。①の実装ができません。（右に動くようになりましたが、最初に左をクリックするとimg/4.jpgが表示されない状況です。）
2
1
  現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
3
2
  現在の記述で解決したいです。
4
3
  よろしくお願いいたします。
@@ -32,11 +31,6 @@
32
31
  </div>
33
32
  <script type="text/javascript" src="js/jquery.js"></script>
34
33
  <script type="text/javascript">
35
-
36
- // .animateを使い、slider-listのleftを-方向にすることでアニメーションを実現している。
37
- // 右方向は .next を押すと移動し、左方向は .prev を押すと移動する。また右端にいる状態で .next を押すと最初の位置に戻り、 左端にいる状態で .prev を押すと最後の位置に移動する。data属性にprev,nextを記述しているのでこちらを取得すると楽です。
38
- // .data() 要素のdata属性を取得します。引数が2つある場合、セットします。
39
-
40
34
  "use strict";
41
35
 
42
36
  $(function() {

7

左をクリックしたときに順番通りに表示できるようにしたいです

2019/11/22 10:50

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,5 @@
1
- 現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいのですが、①の実装ができません。現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
1
+ 現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいです。①の実装ができません。（右に動くようになりましたが、最初に左をクリックするとimg/4.jpgが表示されない状況です。）
2
+ 現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
2
3
  現在の記述で解決したいです。
3
4
  よろしくお願いいたします。
4
5
 
@@ -31,19 +32,18 @@
31
32
  </div>
32
33
  <script type="text/javascript" src="js/jquery.js"></script>
33
34
  <script type="text/javascript">
34
- // 今回やるのはスライドショーです。
35
+
35
36
  // .animateを使い、slider-listのleftを-方向にすることでアニメーションを実現している。
36
37
  // 右方向は .next を押すと移動し、左方向は .prev を押すと移動する。また右端にいる状態で .next を押すと最初の位置に戻り、 左端にいる状態で .prev を押すと最後の位置に移動する。data属性にprev,nextを記述しているのでこちらを取得すると楽です。
37
- // ちなみアニメーションですが配列を用いてそれぞれのポジションを記憶させ、添字を用いてそのポジションに移動させるようにするととても楽です。
38
- // .animate({}) cssのプロパティを一定時間かけて変化させます。アニメーションです。
39
38
  // .data() 要素のdata属性を取得します。引数が2つある場合、セットします。
40
39
 
41
40
  "use strict";
41
+
42
- $(function() {
42
+ $(function() {
43
43
  function slider(target){
44
44
  var box = $('.slider-area'); // スライドする画像を括っているセレクタを格納
45
45
  var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
46
- var nextBtn = $('slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
46
+ var nextBtn = $('.slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
47
47
  var w = 0; // スライドショーの横幅
48
48
  var h = 0; // スライドショーの高さ
49
49
  var imgW; // スライドする画像の横幅
@@ -59,6 +59,7 @@
59
59
  'href': selector.attr('href'),
60
60
  'target': selector.attr('target')
61
61
  });
62
+ return cloneSelector;
62
63
  };
63
64
 
64
65
  // スライド
@@ -67,7 +68,7 @@
67
68
  var i;
68
69
  var cloneSelector;
69
70
  // nextボタンのクリックで実行される処理
70
- if (way < 0){
71
+ if( way < 0 ){
71
72
  cloneSelector = clone(items[0]);
72
73
  $(cloneSelector).css('left', (w*items.length+1)+'px');
73
74
  box.find('ul').append( cloneSelector );
@@ -76,13 +77,18 @@
76
77
  items[i].animate( {'left': (w*i)-w}, 500);
77
78
  };
78
79
  // prevボタンのクリックで実行される処理
79
- } else {
80
+ }else{
80
81
  cloneSelector = clone(items[items.length-1]);
81
- $(cloneSelector).css( {'left': w*i}, 500);
82
+ $(cloneSelector).css( 'left', (w*-1)+'px');
83
+ box.find('ul').append( cloneSelector );
84
+ items.unshift( $(cloneSelector) );
85
+ for( i=0; i<items.length; i++){
86
+ items[i].animate( {'left': w*i}, 500);
87
+ };
82
88
  };
83
- setTimeout(function(){
89
+ setTimeout( function(){
84
90
  slideComplete(way);
85
- });
91
+ }, 500 );
86
92
  };
87
93
 
88
94
  // スライド完了
@@ -102,11 +108,15 @@
102
108
 
103
109
  // イベント設定
104
110
  function addEvent(){
111
+ prevBtn.on({
105
- prevBtn.on('click', function(){
112
+ 'click': function(){
106
- slide(1);
113
+ slide(1);
114
+ }
107
115
  });
116
+ nextBtn.on({
108
- nextBtn.on('click', function(){
117
+ 'click': function(){
109
- slide(-1);
118
+ slide(-1);
119
+ }
110
120
  });
111
121
  };
112
122
 
@@ -119,7 +129,7 @@
119
129
  // 位置調整
120
130
  function pos(){
121
131
  $.each(items, function(index){
122
- $(this).css('left', (w*index)+ 'px');
132
+ $(this).css('left', (w*index)+'px');
123
133
  });
124
134
  };
125
135
 

6

コメントアウトの内容を修正

2019/11/22 10:10

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -37,8 +37,6 @@
37
37
  // ちなみアニメーションですが配列を用いてそれぞれのポジションを記憶させ、添字を用いてそのポジションに移動させるようにするととても楽です。
38
38
  // .animate({}) cssのプロパティを一定時間かけて変化させます。アニメーションです。
39
39
  // .data() 要素のdata属性を取得します。引数が2つある場合、セットします。
40
- // .width() 要素の幅を取得します。
41
- // .length 要素の個数を取得します。
42
40
 
43
41
  "use strict";
44
42
  $(function() {

5

セレクタを修正したことで、nextボタンをクリックイベントが実行できました。

2019/11/22 08:02

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -44,8 +44,8 @@
44
44
  $(function() {
45
45
  function slider(target){
46
46
  var box = $('.slider-area'); // スライドする画像を括っているセレクタを格納
47
- var prevBtn = $('.slider-ctrl-btn prev'); // prevボタンのセレクタを格納した変数
47
+ var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
48
- var nextBtn = $('slider-ctrl-btn next'); // prevボタンのセレクタを格納した変数
48
+ var nextBtn = $('slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
49
49
  var w = 0; // スライドショーの横幅
50
50
  var h = 0; // スライドショーの高さ
51
51
  var imgW; // スライドする画像の横幅

4

タイトル変更

2019/11/22 07:57

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 【jQuery】スライドショーを実装してますが、クリックしてエラーが出ないにも関わらず動作しない理由を知りたいです…
1
+ 【jQuery】ローカル変数を用いてスライドショーを完成させたい
body CHANGED
File without changes

3

内容を修正しました。

2019/11/22 07:11

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,6 @@
1
- jQueryでスライドショーを書いてますが、グローバル関数を使わずにローカル変数を用いて実装しましたが、ブラウザで動作しない状態です。
1
+ 現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいのですが、①の実装ができません。現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
2
- どこを修正すれば良いかが分からないため、質問させていただきました。
3
- 以下、index.htmlとstyle.cssになります。
2
+ 現在の記述で解決したいです。
4
- よろしくお願いします。
3
+ よろしくお願いいたします。
5
4
 
6
5
  ```html
7
6
  <!doctype html>

2

タイトル変更

2019/11/22 06:56

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 【jQuery】スライドショーを実装してますが、動作しない理由を知りたいです…
1
+ 【jQuery】スライドショーを実装してますが、クリックしてエラーが出ないにも関わらず動作しない理由を知りたいです…
body CHANGED
File without changes

1

タイトルを変更しました

2019/11/22 06:46

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 【jQuery】スライドショーを実装してますが、どこでエラーが出てるかが分からないので教えていただきたいです…
1
+ 【jQuery】スライドショーを実装してますが、動作しない理由を知りたいです…
body CHANGED
File without changes