8時間かけて、JavaScriptとjQueryでスライドショーを作ろうと頑張ってみました。ですが、スライドが最後まで到達したときに、最初のスライドに戻すことができずに苦しんでおります。
クリックイベントの中でifが使えない
問題のコード
現在のコードはこちらです。スライドがある#tw_imgsをクリックすると、4枚の画像が消えたり表れたりするという流れです。
ファイルをサーバー上に置いてみましたので、ご興味のあるかたはクリックしてみてください。
[php]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでスライドショー</title>
<style>
/* 一度画像を全てを非表示にして、absoluteを指定して画像を重ねる */
#tw_imgs img{
display:none;
position: absolute;
cursor: pointer;
}
/* 1枚目の画像だけを表示 */
#tw_imgs .img_num0{
display:block;
}
</style>
</head>
<body>
<div id="tw_imgs">
<img class="tw_img img_num0" src="https://pbs.twimg.com/media/B-RbREuCYAA4F8I.jpg">
<img class="tw_img img_num1" src="https://pbs.twimg.com/media/B8vXg0kCAAEDfqC.jpg">
<img class="tw_img img_num2" src="https://pbs.twimg.com/media/B81PD8JCYAIl6kC.png">
<img class="tw_img img_num3" src="https://pbs.twimg.com/media/B81PD3KCQAA9TyY.png">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function check(){
var image = document.getElementById("tw_imgs");
var num = image.getElementsByTagName("img");
var len = num.length;
return len;
}
var n = check();
for (var i = 0; i <= n – 1; i++) {
$(".tw_img").eq(i).click(function() {
$(this).fadeOut(800);
$(this).next().fadeIn(800);
// (n – 1)回目のときは最初の画像に戻る
if (i == (n – 1)) {
console.log(1);
}
});
}
</script>
</body>
</html>
[/php]
if (i == (n – 1)) {}が動かない
今回、問題として挙げられる箇所は41行目です。i <= n - 1のときに、最初の画像に戻るという動作を実現させるつもりですが、それができません。
このコードで言えば、console.logとして”1″が表示されるはずですが、何も表示されません。
スライドの画像が4枚である意味
#tw_imgsでは、Twitterのツイートにある添付画像を呼び出すことを想定します。Twitterの仕様上、ひとつのつぶやきに対して、画像を最大4枚まで添付することができます。
従って、今回作成しているスライドショーは、予めスライドする枚数は決まっていません。imgタグの数を数えて、その数だけループで回す必要があります。そのためにfor文の中でクリックイベントを仕掛けています。
〔参考サイト〕