jQuery slider 画像をうまく回したいです。
解決済
回答 2
投稿
- 評価
- クリップ 2
- VIEW 2,296
退会済みユーザー
５枚ある画像をうまく回したいです。
５枚ある画像の中で、最後の５枚目の時に次へボタンを押したら１枚目に。
１枚目の時に前へボタンを押したら５枚目に動かしたいです。
画像を表示させるクラスなどの受け渡しが
上手くいっていないと思います。
説明が下手で申し訳ないですが、
よろしくお願いいたします。
$(function() {
var last_page = $('.slide').length - 1;
function toggleChangeBtn() {
var slideIndex = $('.slide').index($('.active'));
$('.change-btn').show();
if(slideIndex == 0) {
$('.slide').eq(last_page).addClass('active');
$('.slide').eq(0).removeClass('active');
}else if( slideIndex == last_page){
$('.slide').eq(0).addClass('active');
$('.slide').eq(last_page).removeClass('active');
}
}
$('.index-btn').click(function() {
$('.active').removeClass('active');
var indexNumber = $('.index-btn').index($(this));
$('.slide').eq(indexNumber).addClass('active');
toggleChangeBtn();
$('.index-btn').removeClass('active_btn');
$(this).addClass('active_btn');
});
$('.change-btn').click(function() {
$displaySlide = $('.active');
$displaySlide.removeClass('active');
if ($(this).hasClass('next-btn')) {
$displaySlide.next().addClass('active');
} else {
$displaySlide.prev().addClass('active');
}
toggleChangeBtn();
});
});以下が使用しているhtml,cssファイルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="slide-wrapper">
<h2 class="slide-title">にんじゃわんこの一年</h2>
<div class="change-btn-wrapper">
<div class="change-btn prev-btn">← 前へ</div>
<div class="change-btn next-btn">次へ →</div>
</div>
<ul class="slides">
<li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
<li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
<li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/summer.jpg"></li>
<li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
<li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
</ul>
<div class="index-btn-wrapper">
<div class="index-btn active_btn">1</div>
<div class="index-btn">2</div>
<div class="index-btn">3</div>
<div class="index-btn">4</div>
<div class="index-btn">5</div>
</div>
</div>
<script type="text/javascript" src="common.js"></script>
</body>
</html>body {
font-family: "Hiragino Maru Gothic ProN", sans-serif;
}
ul {
list-style: none;
}
.slide-wrapper {
text-align: center;
width: 1000px;
margin: 0 auto;
color: #5e6f84;
padding: 60px 0;
}
.slide-title {
font-size: 40px;
margin-bottom: 30px;
}
.change-btn-wrapper {
width: 500px;
margin: 20px auto;
font-size: 18px;
}
.change-btn-wrapper:after {
content: "";
clear: both;
display: block;
}
.prev-btn {
cursor: pointer;
float: left;
/*display: none;*/
}
.next-btn {
cursor: pointer;
float: right;
}
.slides {
padding: 0;
}
.slide {
display: none;
}
.active {
display: block;
}
.slide img {
width: 500px;
height: auto;
border-radius: 5px;
}
.index-btn-wrapper {
font-size: 16px;
margin-top: 20px;
}
.index-btn {
display: inline-block;
color: #4e90af;
background-color: #e0f5ff;
width: 40px;
padding: 6px 0;
margin: 0 5px;
border-radius: 3px;
cursor: pointer;
}
.index-btn:hover {
color: #fff;
background-color: #5cabd0;
}
.active_btn{
color: #fff;
background-color: #5cabd0;
}-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
$('.index-btn').click() は toggleChangeBtn(); を削除すれば問題なく動きます。toggleChangeBtn(); での処理より、$('.change-btn').click() で「次/前のボタンをクリックする」というアクションをするほうが手早いかな、と思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
画像のインデックスについては余りを計算する「%」を使うとシンプルに書けると思います。
それから active クラスを使うよりも、show() hide() で表示/非表示を制御する方がいいでしょう。
以下、仕様を想像しつつ書いてみました。参考までに。
$(function(){
var slideIndex = 0;
function toggleChangeBtn(){
$('.index-btn').removeClass('active_btn');
$('.index-btn').eq(slideIndex).addClass('active_btn');
}
$('.index-btn').click(function(){
slideIndex = $('.index-btn').index(this);
$('.slide').hide();
$('.slide').eq(slideIndex).show();
toggleChangeBtn();
});
$('.next-btn').click(function(){moveSlide(1);});
$('.prev-btn').click(function(){moveSlide(-1);});
function moveSlide(step){
$('.slide').hide();
slideIndex = (slideIndex + step) % $('.slide').length;
$('.slide').eq(slideIndex).show();
toggleChangeBtn();
}
});投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/06/29 05:37
$('.change-btn').click() で「次/前のボタンをクリックする」
勉強になりました。