Question

我为朋友创建了一个网站，其中包含一张幻灯片，上面有他最近的Instagram帖子。幻灯片显示左右箭头光标。

正确的光标正在按照我想要的方式工作;它会在每次单击时显示数组中的每个图像，并且无论用户单击右光标的次数如何，它都会继续运行。当它到达数组中的最后一个图像时，由于if语句的存在，它会再次从第一个图像开始。

但是，我遇到左光标有问题，我怀疑它是计数器变量？使用当前代码，当我单击左侧光标（页面刷新并且甚至没有单击右侧光标）时会发生什么，它会转到数组index1中的第二个图像，而不是最后一个。然后我再次单击左侧光标而没有发生任何变化，然后当我第三次单击它时，它会转到数组中的最后一个图像并按原样运行，直到它再次到达阵列中的第二个图像 - 因为之后它会没有转到第一个图像，它会在没有发生任何事情后再跳过第一个图像，然后转到阵列中的最后一个图像。以这种方式重复自己（抱歉这么详细，但我希望人们知道如果代码没有帮助，这里发生了什么）。

var sliderImages = [];
var counter = 1;

sliderImages[0] = "images/i1.png";
sliderImages[1] = "images/i2.png";
sliderImages[2] = "images/i3.png";
sliderImages[3] = "images/i4.png";
sliderImages[4] = "images/i5.png";

$("#right-arrow").click(function() {

  $(".active").attr("src", sliderImages[counter]);
  counter++;
  $('#count').text(counter);
  if (counter >= sliderImages.length) {
    counter = 0;
  }

});

$("#left-arrow").click(function() {
  $(".active").attr("src", sliderImages[counter]);
  counter--;
  if (counter <= 0) {
    counter = sliderImages.length
  }

});

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

加载页面后，您将counter设置为1。单击左箭头按钮时，首先要将图像设置为counter值，然后将图像设置为1。（请记住，数组是0索引的，意味着1指的是第二个项。）

如果counter指的是当前图片，而不是尝试假设即将推出的，那么你会感觉更好。有关详细信息，请参阅下面修改后的代码中的我的评论。

var sliderImages = [];
var counter = 0;         //Start with first image instead of second

sliderImages[0] = "images/i1.png";
sliderImages[1] = "images/i2.png";
sliderImages[2] = "images/i3.png";
sliderImages[3] = "images/i4.png";
sliderImages[4] = "images/i5.png";

$("#right-arrow").click(function() {
  counter++;                                           //Moving forward by one
  if (counter > sliderImages.length-1) counter = 0;    //Wrap-around if we exceed length-1
  $(".active").attr("src", sliderImages[counter]);     //Update img src
});

$("#left-arrow").click(function() {
  counter--;                                           //Moving backward by one
  if (counter < 0) counter = sliderImages.length-1;    //Wrap-around if negative
  $(".active").attr("src", sliderImages[counter]);     //Update img src
});

<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="images/left-arrow.png" class="arrow" id="left-arrow">
      <img src="http://via.placeholder.com/350x150" class="active">
      <img src="images/right-arrow.png" class="arrow" id="right-arrow">

    </div>
  </div>
  <div class="clear"></div>
</section>

Answer 2

使用 计数器 ，就像处理索引一样，因此最初将其设置为0。

这是基本逻辑：

var sliderImages = [
  "//placehold.it/100x100/0bf?text=O",
  "//placehold.it/100x100/f0b?text=1",
  "//placehold.it/100x100/0fb?text=2",
  "//placehold.it/100x100/fb0?text=3",
  "//placehold.it/100x100/b0f?text=4"
];

var n = sliderImages.length; // Total slides
var c = 0;                   // Counter

function anim () {
  $("#mainImage").attr("src", sliderImages[c]);
}

$("#prev").on("click", function() {
  --c;                      // Pre-decrement
  if ( c < 0 ) { c = n-1; } // If lower than 0 - go to last slide 
  anim();                   // animate
});

$("#next").on("click", function() {
  ++c;                      // Pre-increment
  if ( c > n-1 ) { c = 0; }   // If greater than num of slides - go to first slide
  anim();                   // animate
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="mainImage" src="//placehold.it/100x100/0bf?text=O">

<br>
<button id="prev">&larr;</button>
<button id="next">&rarr;</button>

<span id="count"></span>

或者这是一个整理器提取上面的公式：

var sliderImages = [
  "//placehold.it/100x100/0bf?text=O",
  "//placehold.it/100x100/f0b?text=1",
  "//placehold.it/100x100/0fb?text=2",
  "//placehold.it/100x100/fb0?text=3",
  "//placehold.it/100x100/b0f?text=4"
];

var n = sliderImages.length; // Total slides
var c = 0;                   // Counter

function anim () {
  c = c<0 ? n-1 : c%n;                          // Fix counter
  $("#mainImage").attr("src", sliderImages[c]); // Animate (or whatever)
}

$("#prev, #next").on("click", function() {
  c = this.id==="next" ? ++c : --c;             // Increement or decrement
  anim();                                       // Animate 
});

// If you have bullets than you can simply do like:
$(".bullet").on("click", function() {
  c = $(this).index();
  anim();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="mainImage" src="//placehold.it/100x100/0bf?text=O">

<br>
<button id="prev">&larr;</button>
<button id="next">&rarr;</button>

<span id="count"></span>

Answer 3

稍微更新了您的代码：

var sliderImages = [];
var counter = 0;

sliderImages[0] = "images/i1.png";
sliderImages[1] = "images/i2.png";
sliderImages[2] = "images/i3.png";
sliderImages[3] = "images/i4.png";
sliderImages[4] = "images/i5.png";

$("#right-arrow").click(function() {
  counter++;
  $(".active").attr("src", sliderImages[counter]);
  $('#count').text(counter);
  if (counter >= sliderImages.length) {
    counter = 0;
  }

});

$("#left-arrow").click(function() {
  counter--;
  $(".active").attr("src", sliderImages[counter]);
  if (counter <= 0) {
    counter = sliderImages.length - 1;
  }

});

滑块图像对于右光标正常工作但未离开

3 个答案: