質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Q&A

解決済

1回答

720閲覧

【jQuery】スライドショーの左ボタンをクリックしたときに動くようにしたいです

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

0グッド

1クリップ

投稿2019/11/22 10:46

編集2019/11/22 10:47

右をクリックすると順番通りに動くのですが、左をクリックしたときに順番に表示できないです。
現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
現在の記述で解決したいです。
よろしくお願いいたします。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<title></title> 8<link rel="stylesheet" href="css/reset.css"> 9<link rel="stylesheet" href="css/base.css"> 10<link rel="stylesheet" href="css/style.css"> 11</head> 12<body> 13<div class="wrapper"> 14 <div class="slider-wrap"> 15 <div class="slider-area"> 16 <ul class="slider-list clearfix"> 17 <li><img src="img/1.jpg" alt=""></li> 18 <li><img src="img/2.jpg" alt=""></li> 19 <li><img src="img/3.jpg" alt=""></li> 20 <li><img src="img/4.jpg" alt=""></li> 21 </ul> 22 <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button> 23 <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button> 24 </div> 25 </div> 26</div> 27<script type="text/javascript" src="js/jquery.js"></script> 28<script type="text/javascript"> 29 30"use strict"; 31$(function() { 32 function slider(target){ 33 var box = $('.slider-area'); // スライドする画像を括っているセレクタを格納 34 var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数 35 var nextBtn = $('.slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数 36 var w = 0; // スライドショーの横幅 37 var h = 0; // スライドショーの高さ 38 var imgW; // スライドする画像の横幅 39 var imgH; // スライドする画像の高さ 40 var items = []; // スライド画像のセレクタを格納した配列 41 var srcList = []; // 画像の参照先を格納する配列 42 var loadIndex = 0; // 読み込み画像をインデックス 43 44 // スライド要素の複製 45 function clone(selector){ 46 var cloneSelector = selector.clone(true); 47 $(cloneSelector).attr({ 48 'href': selector.attr('href'), 49 'target': selector.attr('target') 50 }); 51 return cloneSelector; 52 }; 53 54 // スライド 55 function slide(way){ 56 removeEvent(); 57 var i; 58 var cloneSelector; 59 // nextボタンのクリックで実行される処理 60 if( way < 0 ){ 61 cloneSelector = clone(items[0]); 62 $(cloneSelector).css('left', (w*items.length+1)+'px'); 63 box.find('ul').append( cloneSelector ); 64 items.push( $(cloneSelector) ); 65 for( i=0; i<items.length; i++){ 66 items[i].animate( {'left': (w*i)-w}, 500); 67 }; 68 // prevボタンのクリックで実行される処理 69 }else{ 70 cloneSelector = clone(items[items.length-1]); 71 $(cloneSelector).css( 'left', (w*-1)+'px'); 72 box.find('ul').append( cloneSelector ); 73 items.unshift( $(cloneSelector) ); 74 for( i=0; i<items.length; i++ ){ 75 items[i].animate( {'left': w*i}, 500); 76 }; 77 }; 78 setTimeout( function(){ 79 slideComplete(way); 80 }, 500 ); 81 }; 82 83 // スライド完了 84 function slideComplete(way){ 85 // next 86 if ( way < 0 ){ 87 items[0].remove(); 88 items.shift(); 89 } 90 // prev 91 else { 92 items[items.length-1].remove(); 93 items.pop(); 94 }; 95 addEvent(); 96 }; 97 98 // イベント設定 99 function addEvent(){ 100 prevBtn.on({ 101 'click': function(){ 102 slide(1); 103 } 104 }); 105 nextBtn.on({ 106 'click': function(){ 107 slide(-1); 108 } 109 }); 110 }; 111 112 // イベント削除 113 function removeEvent(){ 114 prevBtn.off('click'); 115 nextBtn.off('click'); 116 }; 117 118 // 位置調整 119 function pos(){ 120 $.each(items, function(index){ 121 $(this).css('left', (w*index)+'px'); 122 }); 123 }; 124 125 // リサイズ 126 function resize(){ 127 w = target.parent().width(); 128 h = Math.floor(w*imgH/imgW); 129 target.width(w).height(h); 130 box.find('ul').width(w).height(h); 131 pos(); 132 }; 133 134 // セットアップ 135 function setup(){ 136 imgW = box.find('img').width(); 137 imgH = box.find('img').height(); 138 box.find('li').each(function(index){ 139 items[index] = $(this); 140 }); 141 $(window).on('resize', resize); 142 resize(); 143 addEvent(); 144 }; 145 146 // 画像の読み込み完了 147 function loaded(){ 148 if ( loadIndex != (srcList.length-1) ){ 149 loadIndex++; 150 imgLoad(); 151 } else { 152 setup(); 153 }; 154 }; 155 156 // 画像の読み込み 157 function imgLoad(){ 158 var img = new Image(); 159 $(img).on('load', loaded).attr('src', srcList[loadIndex]); 160 }; 161 162 // 初期設定 163 function init(){ 164 box.find('img').each(function(index){ 165 srcList[index] = $(this).attr('src'); 166 }); 167 imgLoad(); 168 }; 169 init(); 170 }; 171 slider($('.slider-area')); 172}); 173</script> 174</body> 175</html>

css

1 2.slider-wrap { 3 width: 600px; 4 padding: 10px; 5 margin: 0 auto; 6 border-radius: 10px; 7 background-color: #DDD; 8 box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4); 9} 10.slider-area { 11 position: relative; 12 width: 600px; 13 height: 300px; 14 background-color: #FFF; 15 overflow: hidden; 16} 17.slider-list { 18 position: absolute; 19 top: 0; 20 left: 0; 21 width: 2400px; 22 height: 300px; 23} 24.slider-list > li { float: left; } 25.slider-ctrl-btn { 26 position: absolute; 27 top: 50%; 28 width: 30px; 29 height: 30px; 30 margin-top: -15px; 31 cursor: pointer; 32 border-radius: 15px; 33 background-color: rgba(255, 255, 255, 0.5); 34} 35.slider-ctrl-btn.prev { left: 30px; } 36.slider-ctrl-btn.next { right: 30px; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

どう考えてもこのサイトで推奨していない質問の「コードをください・デバッグしてください等の丸投げの質問」に該当すると思うのですが、なんとなく眺めていてこれかなというのを見つけてしまったので。

function slide(way) の 7行目

javascript

1$(cloneSelector).css('left', (w*items.length+1)+'px');

javascript

1$(cloneSelector).css('left', (w*(items.length+1))+'px');

の間違いではないでしょうか。

投稿2019/11/23 04:16

2KOH

総合スコア999

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/11/24 01:54

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問