我的JavaScript图像库滑块'；s右滑块不是'；我左边的那个坏了

我的个人网站上有一个图像库滑块（你可以在这里查看它的视觉效果：），使用以下HTML和Javascript编写：

HTML（使用我的目录中的图标和图像）

当您第一次加载站点时，左右按钮工作正常。但是，当您单击下面图库中的任意随机图像时，右箭头将不起作用，但左箭头仍然可以正常工作。当我打开控制台时，我会看到一个错误，显示：

“image71.jpg:1获取404（未找到）”

似乎存在解析问题，因为当“#right arrow.”click函数被激活时，imageNo表现为一个字符串（在本例中，我单击了第7个图像，然后在单击右箭头后，它解析了结尾处的“1”，而不是将其添加到等于8）。但是，左箭头不起作用，左右箭头的代码都是相同的。

试试看

imageNo = parseInt(imageNo) + 1;

而不是

imageNo += 1;

在

$（'#右箭头'）中。单击（）

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

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

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

致：

从
$（'.small images'）。单击（）


您应该创建一个对象数组（更易于维护、添加或删除某些对象）

您确实应该使用
%
操作符来更改图像（
-1%x
等于
x-1
）

当您有多个
else时，如果
且条件始终与值有关，则必须使用
开关
，否则代码将以非常无用的方式放大

从其他任何东西开始，然后从0开始总是比从0开始更棘手（记住，几乎所有东西都从0开始索引）


因此，我们找到了答案（并进行了一些返工，以简化未来的工作）：

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

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

var gallery=[];

您确实需要记住，数组从0开始索引，但是如果您确实想从1开始，您仍然可以指定一个“null”对象作为第一个对象，如下所示：

gallery.push( new GallerySlide() );

然后每次添加图像时（如果保留模式：index 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*/

现在是有趣的部分，修改后的左箭头（您可以从中推断右箭头和初始化）：

侧注：将1分配给库索引后立即初始化

现在我们有了左右键和初始化，让我们看一下点击一个小图片：

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

$（'.small images'）。单击（函数（）{
var si=新的GallerySlide（$（this）.attr（“src”）；
var toChange=new GallerySlide（）；
对于（var i=1；iProvide jsfiddle）或至少具有工作图像的代码段。不幸的是，这不起作用：（在顶部，我将imageNo=1设置为不带引号的值，因此它已经是一个整数了。我刚刚尝试了您编辑的值，问题已解决。这很奇怪——有点奇怪，为什么会使它在左箭头中作为整数，而在右箭头中作为字符串。谢谢！问题在于
$.attr（）
返回一个字符串。您应该使用我新编辑的答案。不客气。attr方法用于将src从“image（编号1到9）.jpg”更改为另一个“image（编号1到9）.jpg”，并且目录中的所有图像都以该名称命名（即image1.jpg、image3.jpg等）.imageNo是一个整数，它与两个字符串（'image'和'.jpg'）连接在一起在attr方法中，整个过程变成了一个字符串。我不会对它提出太多问题，因为它现在已经解决了；一定有一些奇怪的内部错误，因为我刚刚发现它与一个箭头而不是另一个箭头一起工作很奇怪。你的解决方案有效，这才是重要的。
gallery.push( new GallerySlide() );

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

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