滑块图像适用于右光标，但不剩下

我已经为一个朋友创建了一个网站，其中包含幻灯片，其中包括他最近的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>

当您的页面加载时，将counter设置为1。单击左箭头按钮时，您要做的第一件事是将图像设置为counter值，因此将图像设置为1。（请记住，数组是0索引的，意思是1指的是 second 项目）。

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

使用A counter 就像处理 indexes 一样，因此最初将其设置为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>

对您的代码进行了一些更新：

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;
  }
});

相关内容

最新更新

热门标签：