Q&A
ディベロッパーツールのコンソールを開いてもエラーは出てないのですか？
現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
現在の記述で解決したいです。
よろしくお願いいたします。
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"use strict"; 30 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; }
「エラーが出ている」という情報はそもそもどこで得たのですか？
以下は全く別のものなので表現は正しくお願いします。
･エラーが出ている
･動作が想定通りではない
･データがおかしい
タイトルを修正しました。
「動作しない」では起きている現象がわかりませんし、プラグインでない以上は「想定する動作」は質問者さんしか知りません。要は仕様部分、「どうなったら正解なのか」ですね。
起きている現象はazuapricotさんの指摘にあるブラウザのデベロッパーツールでエラーが出ているかいないかでまずひとつ確認ができますし、エラーが出てないなら「どうなるのか」を記載する必要があります。
ありがとうございます。
想定する動作としては、nextとprevボタンをクリックしたときにスライドショーの動きになります。
ディベロッパーツールで確認してみましたが、クリックイベントを実行したときにスライドショーの動きにならずエラーが出なかったです。
言葉不足ですみません。
いえ、試したこと調べたこととして追記してもらえたら良いです。
「エラーは出ていない」も重要な情報です。
回答2件
0
ベストアンサー
セレクタの指定方法が間違えている
$(.指定クラス1.指定クラス2)
prevBtnをconsole.logでみてconsole部分にマウスを持っていって指定したprevボタンなどを指定しているか見てみては
var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
var nextBtn = $('.slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
投稿2019/11/22 07:22
総合スコア1820
セレクタの指定方法を修正したらnextをクリックした時の動作が実行できました。
ありがとうございます。
prevをクリックしたときに右に画像がスライドする動作が機能しなかったです。
0
ざっと見た感じですが、ボタンクリックのイベントを登録しているaddEvent()までの導線がちゃんとつながっていないのだと思います。
addEvent()から逆にたどっていってどこで呼び出しが止まっているか見てみてはいかがでしょうか。
投稿2019/11/22 06:23
総合スコア80875
ありがとうございます。
やってみます。
あなたの回答
tips
プレビュー
