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

Question

我在我的個人網站上有一個圖片庫滑塊（您可以在這裏查看圖片以獲得視覺效果：http://www.alexmarvick.com/gallery.html），使用以下HTML和Javascript編寫：

HTML（使用fontawesome圖標和圖像都在我的目錄）

<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() -handler。

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

編輯：或（我認爲一個更好的選擇），你可以只改變線

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

到：從$('.small-images').click() -handler

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

。

Answer 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

現在我們已經LEF T和右和初始化，讓我們給一看點擊一個小圖像：

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

你去那裏，你應該嘗試一下了（也許你會遇到需要調試，但我很有信心）總而言之，我認爲就添加新圖像和所有這些方面而言，它更加靈活。