Question

我对JavaScript很陌生，但我已经做了很多阅读，只是尝试了。我已创建此代码以显示之前的＆＃39;和＆＃39; next＆＃39;按钮，滚动浏览不同的图片。但是当它到达终点时，它仍然允许你点击。我正在寻找一个代码，当你使用＆＃39; next＆＃39;到达最后一张图片时，你可以回到上一张图片，然后回到第一张图片，反之亦然图片。我不想让它循环，我只是想让它到达终点，所以你必须回到按钮。

摘要：我想要显示5张图片：1到5号。页面以图片编号3开头。使用“上一页”按钮＆＃39;您可以随时拨打较小的号码，使用下一个按钮可以输入更大的号码，但不要超过1号或5号。所以如果你到了最后，你必须使用按钮＆＃39; previous＆＃ 39;或者＆＃39; next＆＃39; （取决于你所在的位置）。

我希望自己清楚明白，如果我没有以正确的方式提出来，那就很抱歉。我真的希望你可以帮助我。

谢谢！

＆＃13;

<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">	
    <button id="previous" type="button">previous</button>   	
	<button id="hoger" type="button">next</button> 	
</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",			
        ];

        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>

＆＃13;

Answer 1

您只需要检查新索引：

＆＃13;

$(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]);
});

＆＃13;

<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>

＆＃13;

Answer 2

当您到达阵列的极端索引时，可以禁用该按钮。这是＆＃34; next＆＃34;的一个例子。按钮。

＆＃13;

$(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]);

   });

＆＃13;

<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>

＆＃13;

使用＆＃39; next＆＃39;显示图像和之前的＆＃39;按钮，但没有循环

2 个答案: