我的JavaScript圖片庫滑塊的右滑塊不起作用，而我的左滑塊是

Question

我的個人網站上有一個圖庫滑塊（您可以在此處查看圖像的滑塊： 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.jpg 404（未找到）”

似乎存在解析問題，因為當激活＃right-arrow'.click函數時，imageNo表現為字符串（在此示例中，我單擊了第7張圖像，然后單擊了右箭頭它在末尾解析為“ 1”，而不是將其等於8）。 但是，它不使用左箭頭來執行此操作，並且左右代碼均相同。

Answer 1

嘗試

imageNo = parseInt(imageNo) + 1;

代替

imageNo += 1;

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

問題是imageNo是一個字符串，而您試圖將其用作int。

編輯 ：或者（我認為是一個更好的選擇），您可以只更改行

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

至：

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

來自$('.small-images').click()程序。

Answer 2

在提出實際答案之前，我想提出一些建議：

• 您應該制作一個對象數組（更易於維護和添加或刪除某些對象）

• 您應該真正使用%運算符來更改圖像（ -1%x等於x-1 ）

• 當您有多個else if和condition始終是關於值的條件時，則必須使用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() );

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

現在這是有趣的部分，重新​​設計的左箭頭（您可以推斷出右箭頭並從中進行初始化）：

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

SIDENOTE： 在為gallery_index分配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);
}

在這里，您應該嘗試一下（也許您會遇到調試的需要，但是我很有信心），總的來說，我認為在添加新圖像和所有這些方面它更加靈活。