編集履歴

質問編集履歴

内容編集

2019/11/22 10:50

投稿

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【jQuery】~~ローカル変数を用いて~~スライドショーを~~完成させ~~たい
1	+ 【jQuery】スライドショーを右側に動かしたい

test CHANGED Viewed

@@ -1,5 +1,3 @@
-現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいです。①の実装ができません。（右に動くようになりましたが、最初に左をクリックするとimg/4.jpgが表示されない状況です。）
 現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
 現在の記述で解決したいです。
@@ -66,16 +64,6 @@
 <script type="text/javascript">
-// .animateを使い、slider-listのleftを-方向にすることでアニメーションを実現している。
-// 右方向は .next を押すと移動し、左方向は .prev を押すと移動する。また右端にいる状態で .next を押すと最初の位置に戻り、 左端にいる状態で .prev を押すと最後の位置に移動する。data属性にprev,nextを記述しているのでこちらを取得すると楽です。
-// .data() 要素のdata属性を取得します。引数が2つある場合、セットします。
 "use strict";

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

2019/11/22 10:50

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,6 @@
-現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいのですが、①の実装ができません。現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
+現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいです。①の実装ができません。（右に動くようになりましたが、最初に左をクリックするとimg/4.jpgが表示されない状況です。）
+現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
 現在の記述で解決したいです。
@@ -64,23 +66,21 @@
 <script type="text/javascript">
-// 今回やるのはスライドショーです。
 // .animateを使い、slider-listのleftを-方向にすることでアニメーションを実現している。
 // 右方向は .next を押すと移動し、左方向は .prev を押すと移動する。また右端にいる状態で .next を押すと最初の位置に戻り、 左端にいる状態で .prev を押すと最後の位置に移動する。data属性にprev,nextを記述しているのでこちらを取得すると楽です。
-// ちなみアニメーションですが配列を用いてそれぞれのポジションを記憶させ、添字を用いてそのポジションに移動させるようにするととても楽です。
-// .animate({}) cssのプロパティを一定時間かけて変化させます。アニメーションです。
 // .data() 要素のdata属性を取得します。引数が2つある場合、セットします。
 "use strict";
-$(function() {
+   $(function() {
   function slider(target){
@@ -88,7 +88,7 @@
     var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
-    var nextBtn = $('slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
+    var nextBtn = $('.slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
     var w = 0; // スライドショーの横幅
@@ -120,6 +120,8 @@
       });
+      return cloneSelector;
     };
@@ -136,7 +138,7 @@
       // nextボタンのクリックで実行される処理
-      if (way < 0){
+      if( way < 0 ){
         cloneSelector = clone(items[0]);
@@ -154,158 +156,176 @@
       // prevボタンのクリックで実行される処理
+      }else{
+        cloneSelector = clone(items[items.length-1]);
+        $(cloneSelector).css( 'left', (w*-1)+'px');
+        box.find('ul').append( cloneSelector );
+        items.unshift( $(cloneSelector) );
+        for( i=0; i<items.length; i++){
+          items[i].animate( {'left': w*i}, 500);
+        };
+      };
+      setTimeout( function(){
+        slideComplete(way);
+      }, 500 );
+    };
+    // スライド完了
+    function slideComplete(way){
+      // next
+      if ( way < 0 ){
+        items[0].remove();
+        items.shift();
+      }
+      // prev
+      else {
+        items[items.length-1].remove();
+        items.pop();
+      };
+      addEvent();
+    };
+    // イベント設定
+    function addEvent(){
+      prevBtn.on({
+        'click': function(){
+          slide(1);
+        }
+      });
+      nextBtn.on({
+        'click': function(){
+          slide(-1);
+        }
+      });
+    };
+    // イベント削除
+    function removeEvent(){
+      prevBtn.off('click');
+      nextBtn.off('click');
+    };
+    // 位置調整
+    function pos(){
+      $.each(items, function(index){
+        $(this).css('left', (w*index)+'px');
+      });
+    };
+    // リサイズ
+    function resize(){
+      w = target.parent().width();
+      h = Math.floor(w*imgH/imgW);
+      target.width(w).height(h);
+      box.find('ul').width(w).height(h);
+      pos();
+    };
+    // セットアップ
+    function setup(){
+      imgW = box.find('img').width();
+      imgH = box.find('img').height();
+      box.find('li').each(function(index){
+        items[index] = $(this);
+      });
+      $(window).on('resize', resize);
+      resize();
+      addEvent();
+    };
+    // 画像の読み込み完了
+    function loaded(){
+      if ( loadIndex != (srcList.length-1) ){
+        loadIndex++;
+        imgLoad();
       } else {
-        cloneSelector = clone(items[items.length-1]);
+        setup();
-        $(cloneSelector).css( {'left': w*i}, 500);
       };
-      setTimeout(function(){
-        slideComplete(way);
-      });
-    };
-    // スライド完了
-    function slideComplete(way){
-      // next
-      if ( way < 0 ){
-        items[0].remove();
-        items.shift();
-      }
-      // prev
-      else {
-        items[items.length-1].remove();
-        items.pop();
-      };
-      addEvent();
-    };
-    // イベント設定
-    function addEvent(){
-      prevBtn.on('click', function(){
-        slide(1);
-      });
-      nextBtn.on('click', function(){
-        slide(-1);
-      });
-    };
-    // イベント削除
-    function removeEvent(){
-      prevBtn.off('click');
-      nextBtn.off('click');
-    };
-    // 位置調整
-    function pos(){
-      $.each(items, function(index){
-        $(this).css('left', (w*index)+ 'px');
-      });
-    };
-    // リサイズ
-    function resize(){
-      w = target.parent().width();
-      h = Math.floor(w*imgH/imgW);
-      target.width(w).height(h);
-      box.find('ul').width(w).height(h);
-      pos();
-    };
-    // セットアップ
-    function setup(){
-      imgW = box.find('img').width();
-      imgH = box.find('img').height();
-      box.find('li').each(function(index){
-        items[index] = $(this);
-      });
-      $(window).on('resize', resize);
-      resize();
-      addEvent();
-    };
-    // 画像の読み込み完了
-    function loaded(){
-      if ( loadIndex != (srcList.length-1) ){
-        loadIndex++;
-        imgLoad();
-      } else {
-        setup();
-      };
     };

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

2019/11/22 10:10

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -76,10 +76,6 @@
 // .data() 要素のdata属性を取得します。引数が2つある場合、セットします。
-// .width() 要素の幅を取得します。
-// .length 要素の個数を取得します。
 "use strict";

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

2019/11/22 08:02

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -90,9 +90,9 @@
     var box = $('.slider-area'); // スライドする画像を括っているセレクタを格納
-    var prevBtn = $('.slider-ctrl-btn prev'); // prevボタンのセレクタを格納した変数
+    var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
-    var nextBtn = $('slider-ctrl-btn next'); // prevボタンのセレクタを格納した変数
+    var nextBtn = $('slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
     var w = 0; // スライドショーの横幅

タイトル変更

2019/11/22 07:57

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【jQuery】スライドショーを~~実装してますが、クリックしてエラーが出ないにも関わらず動作しない理由を知り~~たい~~です…~~
1	+ 【jQuery】ローカル変数を用いてスライドショーを完成させたい

test CHANGED Viewed

File without changes

内容を修正しました。

2019/11/22 07:11

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

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

タイトル変更

2019/11/22 06:56

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【jQuery】スライドショーを実装してますが、動作しない理由を知りたいです…
1	+ 【jQuery】スライドショーを実装してますが、クリックしてエラーが出ないにも関わらず動作しない理由を知りたいです…

test CHANGED Viewed

File without changes

タイトルを変更しました

2019/11/22 06:46

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【jQuery】スライドショーを実装してますが、~~どこでエラーが出てるかが分から~~ない~~ので教えてい~~た~~だきた~~いです…
1	+ 【jQuery】スライドショーを実装してますが、動作しない理由を知りたいです…

test CHANGED Viewed

File without changes