Q&A
penguinshunyaさん
ありがとうございます！その通りでした。
やはり書き方のミスでした。jQuery勉強します。
ありがとうございます！感謝しています。
現在jQueryを使ってスライドショーアプリを作成しています。
ドットインストールにその項目があるのでそれを見ながら作っています。
質問があるのですが、
結論から言うと、
下記のコードのバグ（「前へ」「次へ」ボタンを押したとき思い通りサムネイルが透明にならないバグ）を直すにはどうしたらいいでしょうか？
今ドットインストールの下記リンクのところを学習しており、
動画でできていることが実際やってみるとうまくできません。
http://dotinstall.com/lessons/slideshow_jquery/25406
コンソールにもエラーは出ておらず、また何度もコードを確認したのですがわかりませんでした。
状況として、
本当は
「前へ」や「次へ」ボタンをクリックすると真ん中に出ているのと同じサムネイル画像以外が透明になります。
しかし現状は、
それが透明になりません。
↓こうなってほしい
![イメージ説明]WIDTH:550
コードは次の通りです。
lang
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>jQueryでスライドショー</title> 6<style> 7body { 8 margin: 10px auto; 9 text-align: center; 10} 11 12.thumbnail { 13 width: 300px; 14 height: 300px; 15 opacity: 0.5; 16 cursor: pointer; 17} 18 19.current { 20 opacity: 1.0; 21} 22 23#main img { 24 width: 900px; 25 height: 900px; 26} 27 28button { 29 width: 100px; 30 height: 50px; 31} 32 33.thumbnail+.thumbnail { 34 margin-left: 4px; 35} 36</style> 37</head> 38<body> 39 <div id="thumbnails"></div> 40 <div id="main"></div> 41 <div id="nav"> 42 <button id="prev">« 前へ</button> 43 <button id="next">次へ »</button> 44 <button id="play">再生</button> 45 <button id="stop">停止</button> 46 </div> 47 48 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 49 <script> 50 $(function() { 51 var files = [ '1b.jpg', '2b.jpg', '3b.jpg' ]; 52 53 var img; 54 var timer; 55 var currentNum = 0; 56 57 for (var i = 0; i < files.length; i++) { 58 img = $('<img>').attr('src', files[i]).addClass('thumbnail'); 59 $('#thumbnails').append(img); 60 } 61 62 $('#main').append($('<img>').attr('src', files[0])); 63 64 $('.thumbnail:first').addClass('current'); 65 66 $('.thumbnail').click(function() { 67 $('#main img').attr('src', $(this).attr('src')); 68 currentNum = $(this).index(); 69 $(this).addClass('current').siblings().removeClass('current'); 70 }); 71 72 $('#prev').click(function() { 73 currentNum--; 74 if (currentNum < 0) { 75 currentNum = files.length - 1; 76 } 77 $('#main img').attr('src', files[currentNum]); 78 $('.thumbnail').removeClass('current'); 79 $('.thumbnail').eq('currentNum').addClass('current'); 80 }); 81 82 $('#next').click(function() { 83 currentNum++; 84 if (currentNum > files.length - 1) { 85 currentNum = 0; 86 } 87 $('#main img').attr('src', files[currentNum]); 88 $('.thumbnail').removeClass('current'); 89 $('.thumbnail').eq('currentNum').addClass('current'); 90 }); 91 function autoPlay() { 92 $('#next').click(); 93 timer = setTimeout(function() { 94 autoPlay(); 95 }, 1000); 96 } 97 $('#play').click(function() { 98 autoPlay(); 99 }); 100 $('#stop').click(function() { 101 clearTimeout(timer); 102 }); 103 }); 104 </script> 105</body>
prevIDのclickメソッドやnextIDのclickメソッドの箇所が問題のポイントと思い
何度も見ているのですが解決できていない次第です。
もしわかる方がいればよろしくお願いします。
回答2件
0
lang
1 $('#prev').click(function() { 2 currentNum--; 3 if (currentNum < 0) { 4 currentNum = files.length - 1; 5 } 6 $('#main img').attr('src', files[currentNum]); 7 $('.thumbnail').removeClass('current'); 8 $('.thumbnail').eq('currentNum').addClass('current'); 9 }); 10 11 $('#next').click(function() { 12 currentNum++; 13 if (currentNum > files.length - 1) { 14 currentNum = 0; 15 } 16 $('#main img').attr('src', files[currentNum]); 17 $('.thumbnail').removeClass('current'); 18 $('.thumbnail').eq('currentNum').addClass('current'); 19 }); 20
の部分で
lang
1 $('.thumbnail').eq('currentNum').addClass('current');
ではなく、
lang
1 $('.thumbnail').eq(currentNum).addClass('current');
ではないでしょうか?
投稿2015/04/28 06:19
総合スコア1698
0
ベストアンサー
$('.thumbnail').eq('currentNum').addClass('current');
を
$('.thumbnail').eq(currentNum).addClass('current');
に修正するとできるような気がします。
投稿2015/04/28 06:12
総合スコア140
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/28 06:20
2015/04/28 06:22