我的 JavaScript 图片库滑块的右侧滑块不起作用，而我的左侧滑块是答案

【问题标题】：My JavaScript image gallery slider's right slider isn't working and my left one is我的 JavaScript 图片库滑块的右侧滑块不起作用，而我的左侧滑块是
【发布时间】：2017-02-18 22:00:45
【问题描述】：

我的个人网站上有一个图片库滑块（您可以在这里查看：http://www.alexmarvick.com/gallery.html），使用以下 HTML 和 Javascript 编写：

HTML（使用字体很棒的图标和图像在我的目录中）

    <section class="body-home" id="body-gallery">
        <div id="gallery-outline">
            <img id="gallery-enlarged-image" src="image1.jpg">
            <p id="caption">Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014</p>
            <div id="gallery-scroll-selectors">
                <i class="fa fa-arrow-circle-left" id="left-arrow" aria-hidden="true"></i>
                <i class="fa fa-arrow-circle-right" id="right-arrow" aria-hidden="true"></i>
            </div>

            <div id="gallery-image-options-outline">
                <li><img class="small-images" id="1" src="image1.jpg"></li>
                <li><img class="small-images" id="2" src="image2.jpg"></li>
                <li><img class="small-images" id="3" src="image3.jpg"></li>
                <li><img class="small-images" id="4" src="image4.jpg"></li>
                <li><img class="small-images" id="5" src="image5.jpg"></li>
                <li><img class="small-images" id="6" src="image6.jpg"></li>
                <li><img class="small-images" id="7" src="image7.jpg"></li>
                <li><img class="small-images" id="8" src="image8.jpg"></li>
                <li><img class="small-images" id="9" src="image9.jpg"></li>
            </div>
        </div>
    </section>

JavaScript

var caption = "";
var imageNo = 1;

var photoChange = function() {

    if (imageNo == 0) {
        imageNo = 1;
        caption = "Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014";
        $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    }

    else if (imageNo == 10) {
        imageNo = 9;
        caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
        $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    }

    else if (imageNo == 1) {
        caption = "Study Abroad Trip in Spring 2014: Weekend Trip to Paris, France. Missing it! February 2014";
    }

    else if (imageNo == 2) {
        caption = "Our cat, Cosmo";
    }

    else if (imageNo == 3) {
        caption = "Gonzaga University Graduation, May 2016";
    }

    else if (imageNo == 4) {
        caption = "Gonzaga University Graduation Picture 2, May 2016";
    }

    else if (imageNo == 5) {
        caption = "Me with my parents in Burch Bay, WA. June 2016";
    }

    else if (imageNo == 6) {
        caption = "Me striking a pose with my Senior Design Project. April 2016";
    }

    else if (imageNo == 7) {
        caption = "Our cat, Rudy";
    }

    else if (imageNo == 8) {
        caption = "At the Orleans arena in Vegas watching Gonzaga Basketball take the WCC title. March 2016";
    }

    else if (imageNo == 9) {
        caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
    }

    else {
        caption = "No Image Here Yet";
    }

    $('#caption').html(caption);

};

$('#gallery-enlarged-image').hide();
$('#gallery-enlarged-image').fadeIn(500);

$('.small-images').click(function() {

    var bigImageSrc = $(this).attr("src");
    $('#gallery-enlarged-image').attr("src", bigImageSrc);

    imageNo = $(this).attr("id");

    $('#gallery-enlarged-image').hide();
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

$('#left-arrow').click(function() {

    $('#gallery-enlarged-image').hide();

    imageNo -= 1;

    $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

$('#right-arrow').click(function() {

    $('#gallery-enlarged-image').hide();

    imageNo += 1;

    $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

当您第一次加载网站时，左右按钮可以正常工作。但是，当您单击下面画廊中的任何随机图像时，右箭头会失效，但左箭头仍然可以正常工作。当我打开控制台时，我会收到一条错误消息：

“image71.jpg:1 GET http://www.alexmarvick.com/image71.jpg404（未找到）”

似乎存在解析问题，当 '#right-arrow'.click 函数被激活时，imageNo 表现为一个字符串（在本例中，我点击了第 7 张图片，然后我一点击它在其末尾解析“1”而不是将其添加到等于 8) 的右箭头。但是，它不使用向左箭头执行此操作，并且左右的代码相同。

【问题讨论】：

提供 jsfiddle 或至少代码 sn-p 与工作图像。

标签： javascript jquery html image

【解决方案1】：

试试

imageNo = parseInt(imageNo) + 1;

而不是

imageNo += 1;

在您的$('#right-arrow').click() -handler 中。

问题在于imageNo 是一个字符串，而您正试图将其用作 int。

编辑：或者（我认为更好的选择）您可以更改行

imageNo = $(this).attr("id");

到：

imageNo = parseInt($(this).attr("id"));

来自$('.small-images').click() -handler。

【讨论】：

不幸的是，这不起作用:(在顶部，我设置了 imageNo = 1 没有引号，所以它已经是一个整数了。
我刚试过你编辑的，问题解决了。不过这很奇怪——有点想知道发生了什么使它在左箭头中充当整数，但在右侧充当字符串。谢谢！
问题是$.attr()返回一个字符串。您应该改用我新编辑的答案。不客气。
attr 方法用于将 src 从 'image(number 1 to 9).jpg' 更改为另一个 'image(number 1 to 9).jpg'，并且所有图片在目录以此命名（即 image1.jpg、image3.jpg 等）。 imageNo 是一个整数，它在 attr 方法中与两个字符串（'image' 和 '.jpg'）连接，然后整个事情变成一个字符串。既然已经解决了，我不会过多质疑；一定有一些奇怪的内部错误，因为我只是发现它与一个箭头而不是另一个箭头一起工作很奇怪。您的解决方案奏效了，这才是最重要的。

【解决方案2】：

在提出实际答案之前，我想提出一些建议：

你应该创建一个对象数组（更容易维护和添加或删除一些东西）
您应该真正使用 % 运算符来更改图像（-1%x 等于 x-1）
当您有多个 else if 并且条件始终与值有关时，您必须使用 switch 否则代码将以非常无用的方式放大
从 0 开始总是比实际从 0 开始更棘手（记住，几乎所有东西都从 0 开始索引）

所以我们去寻找答案（以及一些返工以简化未来的工作）：

首先我们需要一个构造函数（对象最简单的方法）：

function GallerySlide(url, caption){
  this.url = url || "#";
  this.caption = caption || "No image here yet";/*if you don't pass a caption it will assign the left operand of the OR*/
  this.isEqualTo = function(obj){
    return this.url == obj.url;
  }/*for small image click*/

}

然后我们将使用这些对象的数组来简化控制：

var gallery=[];

您确实需要记住，数组从 0 开始索引，但如果您真的想从 1 开始，您仍然可以将“无效”对象分配为第一个对象，如下所示：

gallery.push( new GallerySlide() );

然后每次添加图像时（如果您保留模式：索引 1：image1.png），您可以使用：

gallery.push( new GallerySlide("image"+gallery.length+".jpg", /*caption goes here*/) );/*as the left adjacent spot will always be the index gallery.length*/

那么我们需要一个全局变量来保存当前画廊的位置：

var gallery_index = 1;/*only set this after all images are loaded in array*/

现在是有趣的部分，重新设计的左箭头（你可以从中推断出右箭头和初始化）：

$('#left-arrow').click(function(){
  gallery_index-=1;
  gallery_index%=gallery.length;
  if(gallery_index == 0){
    gallery_index = gallery_length-1;
  }
  $('#gallery-enlarged-image').fadeOut(500);/*way smoother look*/
  $('#gallery-enlarged-image').attr("src",gallery[gallery_index].url);
  $('#gallery-enlarged-image').fadeIn(500);
  $('#caption').html(gallery[gallery_index].caption);
}

旁注：在将 1 分配给 gallery_index 后立即初始化

现在我们已经完成了左右和初始化，让我们来看看点击一个小图：

$('.small-images').click(function(){
  var si = new GallerySlide( $(this).attr("src") );
  var toChange = new GallerySlide();
  for(var i = 1 ; i<gallery.length ; i++){
    if( gallery[i].isEqualTo(si) ){
      toChange = gallery[i];
      gallery_index = i;
      break;
    }
  }
  $('#gallery-enlarged-image').fadeOut(500);/*the following seems like it could go in a function in which you always pass the array and the current index (or have them global to it)*/
  $('#gallery-enlarged-image').attr("src",gallery[gallery_index].url);
  $('#gallery-enlarged-image').fadeIn(500);
  $('#caption').html(gallery[gallery_index].caption);
}

你去吧，你应该尝试一下（也许你会遇到调试的需要，但我很有信心）总而言之，我认为它在添加新图像和所有这些东西方面更加灵活。

【讨论】：