###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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/06/28 20:37