Question

我正在为朋友创建一个网站，其中包含幻灯片中的一些最新Instagram帖子。我已经包含左右游标，供用户从图像滑动到图像，但是我无法实现最终目标 - 当用户点击右箭头时，它会滑动图像并继续，无论他点击多少次它。大约有8张图片。单击左侧光标时应该同样适用。

滑块没有响应。根据当前代码，当我单击右箭头时，它会显示下一个图像，直到它到达最后一个图像。然后我点击右箭头两次，第一次没有任何反应，第二次循环回来并在阵列中显示第二个图像，而不是第一个

$(document).ready(function() {
  $(".disciplines img").hover(function(){ 
    $(this).css("cursor", "pointer");
  });

  $(".disciplines").mouseenter(function(){
   $(this).find('h3').slideDown();
  });

  $(".disciplines").mouseleave(function(){
    $(this).find('h3').slideUp();
  });

  var sliderImages = [];
  var counter = 0;

  sliderImages[0] = "images/i1.png";
  sliderImages[1] = "images/i2.png";
  sliderImages[2] = "images/i3.png";

  $("#right-arrow").click(function(){
    counter++;
    $(".active").attr("src", sliderImages[counter]);

    if (counter > sliderImages.length)
    {
      counter = 0;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="instagram-feed">
  <div class="container">
    <h2>INSTAGRAM GALLERY</h2>
    <div class="insta-gallery">
      <img src="images/left-arrow.png" class="arrow" id="left-arrow">
      <img src="images/i1.png" class="active">  
      <img src="images/right-arrow.png" class="arrow" id="right-arrow">
    </div>
  </div>
  <div class="clear"></div>
</section>

Answer 1

您需要确保使用greater than or equal to进行比较>=，而不只是greater than（>）。

您的计数器高于3，因为它没有计算3作为重置计数器的理由（，因为您的代码表示计数器必须是greater than长度，即3 ）。这就是为什么它继续而不是重置。

var sliderImages = [];
var counter = 0;

sliderImages[0] = "http://placehold.it/100x100";
sliderImages[1] = "http://placehold.it/200x100";
sliderImages[2] = "http://placehold.it/300x100";

$("#right-arrow").click(function(){

$(".active").attr("src", sliderImages[counter]);
counter++;
$('#count').text(counter);
if (counter >= sliderImages.length)
  {
    counter = 0;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="instagram-feed">
  <div class="container">
    <h2>INSTAGRAM GALLERY</h2>
    <div class="insta-gallery">
      <img src="http://placehold.it/50x50" class="arrow" id="left-arrow">
      <img src="http://placehold.it/150x100" class="active">  
      <img src="http://placehold.it/50x50" class="arrow" id="right-arrow">
    </div>
    <p id="count">0</p>
  </div>
  <div class="clear"></div>
</section>

图像幻灯片库点击事件

1 个答案: