は、「次へ」と「前の」ボタンで画像を表示しますが、ないループ

私はJavaScriptにかなり新しいですませんが、私は読書の多くを行って、ちょうどしようとしています。私は別の写真をスクロールし、「以前」と「次へ」ボタンで画像を表示するには、このコードを作成しました。しかし、それが終わりに達すると、あなたはまだクリックすることができます。私はあなたが、「次へ」を最後の画像に達したときに最初の画像に到達したとき、あなたはちょうどその逆の「戻る」と前の画像に戻り、とすることができ、コードを探しています。私はそれがループしないようにしたい、私はちょうどあなたがボタンで戻って行く必要があるので、最後に到達したい。は、「次へ」と「前の」ボタンで画像を表示しますが、ないループ

概要：私は5枚の画像を表示したい：番号1を5までは、ページには、「前のボタン」あなたはいつもあなたがに行くことができる次のボタンで、少ない数に行くことができるとピクチャ番号3で始まりますより多くの番号が付いていますが、決して過去の番号1または過去の番号5を超えてはいけません。したがって、最後に達した場合は、「前の」または「次の」ボタンを使用する必要があります。

私はそれを正しい方法を求めておりません場合、私は自分自身を明らかにして、申し訳ありませんと思っています。私はあなたが私を助けてくれることを本当に望む。

ありがとうございました！

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="echo.css"> 
 
</head> 
 
<body> 
 

 
<div id="imageGallery">  
 
    <img id="image" src="./images/1.png" /> 
 
</div>  
 
    
 
<div id="gain"> \t 
 
    <button id="previous" type="button">previous</button> \t 
 
\t <button id="hoger" type="button">next</button> \t 
 
</div> 
 

 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 

 
<script> 
 
    $(document).ready(function() { 
 

 
     var images = [ 
 
      "./images/1.png", 
 
      "./images/2.png", 
 
      "./images/3.png", 
 
      "./images/4.png", 
 
      "./images/5.png", \t \t \t 
 
     ]; 
 

 
     var imageIndex = 0; 
 

 
     $("#previous").on("click", function(){   
 
      imageIndex = (imageIndex-1);  
 
      $("#image").attr('src', images[imageIndex]); 
 
     }); 
 

 
     $("#hoger").on("click", function(){ 
 
      imageIndex = (imageIndex+1);  
 
      $("#image").attr('src', images[imageIndex]); 
 
     }); 
 

 
     $("#image").attr(images[0]); 
 

 
    }); 
 

 
</script> 
 

 
</body> 
 
</html>

出典

2016-10-31 djarum

あなただけの新しいインデックスをチェックする必要があります：あなたは、配列の極端な指標に達したときは、ボタンを無効にすることができ

$(document).ready(function() { 
 

 
    var images = [ 
 
     "http://lorempixel.com/100/100/", 
 
     "http://lorempixel.com/150/100/", 
 
     "http://lorempixel.com/200/100/", 
 
    ]; 
 

 
    var imageIndex = 0, 
 
     iLength = images.length - 1, 
 
     imageEl = $('#image'), 
 
     prevEl = $('#previous'), 
 
     nextEl = $('#hoger'); 
 

 
    prevEl.on("click", function() { 
 
     imageIndex--; 
 

 
     imageEl.attr('src', images[imageIndex]); 
 

 
     nextEl.prop('disabled', false); 
 
     prevEl.prop('disabled', !imageIndex); 
 
    }); 
 

 
    nextEl.on("click", function() { 
 
     imageIndex++; 
 

 
     imageEl.attr('src', images[imageIndex]); 
 

 
     nextEl.prop('disabled', imageIndex === iLength); 
 
     prevEl.prop('disabled', false); 
 
    }); 
 

 
    prevEl.prop('disabled', true); 
 
    imageEl.attr(images[0]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="imageGallery"> 
 
    <img id="image" src="http://lorempixel.com/100/100/" /> 
 
</div> 
 

 

 
<div id="gain"> 
 
    <button id="previous" type="button">previous</button> 
 

 
    <button id="hoger" type="button">next</button> 
 
</div>

出典

2016-10-31 19:56:02

申し訳ありませんが、私はあなたのコードを動作させることができませんでした..私は何か間違ったことをやっていますか？それは私にクリック可能なボタンを残しますが、画像に変化はありませんか？ – djarum

私は自分の答えを実行可能に更新しました。わたしにはできる。 –

を。ここに「次へ」ボタンの例があります。

$(document).ready(function() { 
 

 
    var images = [ 
 
     "http://lorempixel.com/100/100/", 
 
     "http://lorempixel.com/150/100/", 
 
     "http://lorempixel.com/200/100/", 
 
    ]; 
 

 
    var imageIndex = 0; 
 
    var iLength = images.length - 1; 
 

 
    $("#previous").on("click", function() { 
 
     imageIndex = (imageIndex - 1); 
 
     $("#image").attr('src', images[imageIndex]); 
 

 
     $("#hoger").prop("disabled", false); 
 
    }); 
 

 
    $("#hoger").on("click", function() { 
 
     imageIndex = (imageIndex + 1); 
 
     $("#image").attr('src', images[imageIndex]); 
 
     if (imageIndex == iLength) { 
 
     $(this).prop("disabled", true); 
 
     } 
 
    }); 
 

 
    $("#image").attr(images[0]); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="imageGallery"> 
 
    <img id="image" src="http://lorempixel.com/100/100/" /> 
 
</div> 
 

 

 
<div id="gain"> 
 
    <button id="previous" type="button">previous</button> 
 

 
    <button id="hoger" type="button">next</button> 
 
</div>

出典

2016-10-31 20:05:08 user2314737

はあなたのコードをありがとう、それは私が戻って「以前」ボタンで行くと、他のボタンが非アクティブにとどまることが正しいのですか？ – djarum

私の例では、「次へ」ボタンの機能のみを実装しました。「前の」ボタンについては、同様のものを実装することができます。 – user2314737

ありがとう、私は他のボタンのための同様の機能をしようとします。 – djarum

は、「次へ」と「前の」ボタンで画像を表示しますが、ないループ

答えて

関連する問題