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

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

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

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

Q&A

解決済

2回答

2986閲覧

jQuery slider 画像をうまく回したいです。

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

0グッド

2クリップ

投稿2016/06/28 13:40

###5枚ある画像をうまく回したいです。
5枚ある画像の中で、最後の5枚目の時に次へボタンを押したら1枚目に。
1枚目の時に前へボタンを押したら5枚目に動かしたいです。

画像を表示させるクラスなどの受け渡しが
上手くいっていないと思います。

説明が下手で申し訳ないですが、
よろしくお願いいたします。

javascript

1$(function() { 2 3 var last_page = $('.slide').length - 1; 4 5 function toggleChangeBtn() { 6 var slideIndex = $('.slide').index($('.active')); 7 $('.change-btn').show(); 8 9 if(slideIndex == 0) { 10 $('.slide').eq(last_page).addClass('active'); 11 $('.slide').eq(0).removeClass('active'); 12 }else if( slideIndex == last_page){ 13 $('.slide').eq(0).addClass('active'); 14 $('.slide').eq(last_page).removeClass('active'); 15 } 16 } 17 18 $('.index-btn').click(function() { 19 $('.active').removeClass('active'); 20 var indexNumber = $('.index-btn').index($(this)); 21 $('.slide').eq(indexNumber).addClass('active'); 22 toggleChangeBtn(); 23 24 $('.index-btn').removeClass('active_btn'); 25 $(this).addClass('active_btn'); 26 }); 27 28 $('.change-btn').click(function() { 29 $displaySlide = $('.active'); 30 $displaySlide.removeClass('active'); 31 if ($(this).hasClass('next-btn')) { 32 $displaySlide.next().addClass('active'); 33 } else { 34 $displaySlide.prev().addClass('active'); 35 } 36 toggleChangeBtn(); 37 }); 38}); 39

####以下が使用しているhtml,cssファイルです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="style.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8 </head> 9 <body> 10 <div class="slide-wrapper"> 11 <h2 class="slide-title">にんじゃわんこの一年</h2> 12 <div class="change-btn-wrapper"> 13 <div class="change-btn prev-btn">← 前へ</div> 14 <div class="change-btn next-btn">次へ →</div> 15 </div> 16 <ul class="slides"> 17 <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li> 18 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li> 19 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/summer.jpg"></li> 20 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li> 21 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li> 22 </ul> 23 <div class="index-btn-wrapper"> 24 <div class="index-btn active_btn">1</div> 25 <div class="index-btn">2</div> 26 <div class="index-btn">3</div> 27 <div class="index-btn">4</div> 28 <div class="index-btn">5</div> 29 </div> 30 </div> 31 <script type="text/javascript" src="common.js"></script> 32 </body> 33</html> 34

css

1body { 2 font-family: "Hiragino Maru Gothic ProN", sans-serif; 3} 4 5ul { 6 list-style: none; 7} 8 9.slide-wrapper { 10 text-align: center; 11 width: 1000px; 12 margin: 0 auto; 13 color: #5e6f84; 14 padding: 60px 0; 15} 16 17.slide-title { 18 font-size: 40px; 19 margin-bottom: 30px; 20} 21 22.change-btn-wrapper { 23 width: 500px; 24 margin: 20px auto; 25 font-size: 18px; 26} 27 28.change-btn-wrapper:after { 29 content: ""; 30 clear: both; 31 display: block; 32} 33 34.prev-btn { 35 cursor: pointer; 36 float: left; 37 /*display: none;*/ 38} 39 40.next-btn { 41 cursor: pointer; 42 float: right; 43} 44 45.slides { 46 padding: 0; 47} 48 49.slide { 50 display: none; 51} 52 53.active { 54 display: block; 55} 56 57.slide img { 58 width: 500px; 59 height: auto; 60 border-radius: 5px; 61} 62 63.index-btn-wrapper { 64 font-size: 16px; 65 margin-top: 20px; 66} 67 68.index-btn { 69 display: inline-block; 70 color: #4e90af; 71 background-color: #e0f5ff; 72 width: 40px; 73 padding: 6px 0; 74 margin: 0 5px; 75 border-radius: 3px; 76 cursor: pointer; 77} 78 79.index-btn:hover { 80 color: #fff; 81 background-color: #5cabd0; 82} 83 84.active_btn{ 85 color: #fff; 86 background-color: #5cabd0; 87} 88

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

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

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

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

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

guest

回答2

0

画像のインデックスについては余りを計算する「%」を使うとシンプルに書けると思います。
それから active クラスを使うよりも、show() hide() で表示/非表示を制御する方がいいでしょう。
以下、仕様を想像しつつ書いてみました。参考までに。

JavaScript

1$(function(){ 2 var slideIndex = 0; 3 4 function toggleChangeBtn(){ 5 $('.index-btn').removeClass('active_btn'); 6 $('.index-btn').eq(slideIndex).addClass('active_btn'); 7 } 8 9 $('.index-btn').click(function(){ 10 slideIndex = $('.index-btn').index(this); 11 $('.slide').hide(); 12 $('.slide').eq(slideIndex).show(); 13 toggleChangeBtn(); 14 }); 15 16 $('.next-btn').click(function(){moveSlide(1);}); 17 $('.prev-btn').click(function(){moveSlide(-1);}); 18 19 function moveSlide(step){ 20 $('.slide').hide(); 21 slideIndex = (slideIndex + step) % $('.slide').length; 22 $('.slide').eq(slideIndex).show(); 23 toggleChangeBtn(); 24 } 25});

投稿2016/06/28 18:17

編集2016/06/28 18:20
googlecus

総合スコア52

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

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

退会済みユーザー

退会済みユーザー

2016/06/28 20:37

早々のご回答ありがとうございます。無事解決できました! 「show() hide() で表示/非表示を制御する」勉強になりました。
guest

0

ベストアンサー

$('.index-btn').click()toggleChangeBtn(); を削除すれば問題なく動きます。toggleChangeBtn(); での処理より、$('.change-btn').click() で「次/前のボタンをクリックする」というアクションをするほうが手早いかな、と思います。

動くサンプル:https://jsfiddle.net/568kbewn/

投稿2016/06/28 17:30

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2016/06/28 20:37

早々のご回答ありがとうございます。なるほど! $('.change-btn').click() で「次/前のボタンをクリックする」 勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問