如何旋轉木馬

我開發的圖像旋轉木馬，看起來像工作擺脫未定義指數如下：如何旋轉木馬

我將通過和風格都正確，一旦我擁有所有的JavaScript和JQuery功能正常，所以在現階段它不會像下面的圖片那樣顯示100％，所以不用擔心。我目前的問題是，當點擊旋轉木馬時，其中一個較小的縮略圖在img下顯示爲「undefined」，編號爲img3，另一個在img1下。我知道這個問題是從我的索引嘗試在最後或在我的數組的開始時調用不存在的東西。如何在JavaScript中修復這個問題，以便數組中的第一個索引顯示出來而不是不存在的索引？

我剝出不相關的代碼下面，所以你可以看到我有這麼遠：

HTML

<div id="carouselContainer"> 
<!--Add carousel and lightbox "view larger" button here--> 
<img id="productImage" src="#"> 
<div id="viewLarger"></div> 
<div id="carouselWrapper"> 
    <button id="prev">Prev</button> 
    <div id="carousel"> 
     <img id="img1" src="#"> 
     <img id="img2" src="#"> 
     <img id="img3" src="#"> 
    </div> 
    <button id="next">Next</button> 
</div> 
</div>

的JavaScript

$.getJSON("item-data.json", function(results) { 
     $.each(results.CatalogEntryView, function(index, item) { 

      document.getElementById("productImage").src = item.Images[0].PrimaryImage[0].image; 
      document.getElementById("img1").src = item.Images[0].AlternateImages[0].image; 
      document.getElementById("img2").src = item.Images[0].AlternateImages[1].image; 
      document.getElementById("img3").src = item.Images[0].AlternateImages[2].image; 

     }); 

     //Map Array for Slideshow 
    var slideShowArray = results.CatalogEntryView.map(item => item.Images.map(imgs =>[imgs.PrimaryImage[0].image, ...imgs.AlternateImages.map(alt => alt.image)]))[0][0]; 

     //Slideshow functions 
      var num = 0 
      function next() { 
       var slider = document.getElementById("productImage"); 
       var carouselImg1 = document.getElementById("img1"); 
       var carouselImg2 = document.getElementById("img2"); 
       var carouselImg3 = document.getElementById("img3"); 
       num++ 
       if(num >= slideShowArray.length) 
        {num = 0} 
          productImage.src = slideShowArray[num]; 
          img1.src = slideShowArray[num-1]; 
          img2.src = slideShowArray[num]; 
          img3.src = slideShowArray[num+1]; 
      } 

      function prev() { 
       var slider = document.getElementById("productImage"); 
       var carouselImg1 = document.getElementById("img1"); 
       var carouselImg2 = document.getElementById("img2"); 
       var carouselImg3 = document.getElementById("img3"); 
       num--; 
       if(num < 0) { 
        num = slideShowArray.length-1; 
       } 
       productImage.src = slideShowArray[num]; 
         img1.src = slideShowArray[num-1]; 
         img2.src = slideShowArray[num]; 
         img3.src = slideShowArray[num+1]; 
      } 

     //Event Listeners 
      document.getElementById("next").addEventListener("click", next) 
      document.getElementById("prev").addEventListener("click", prev) 

      });

CSS佔位符碼來縮小縮略圖

#img1, #img2, #img3 { 
    height: 50px; 
    width: 50px; 
}

JSON

這撥弄會告訴你在item-data.json相關的JSON數據：https://jsfiddle.net/kdd1gppz/

來源

2017-08-28 SDH

if(num >= slideShowArray.length) 
       {num = 0} 
productImage.src = slideShowArray[num]; 
img1.src = slideShowArray[num-1]; 
img2.src = slideShowArray[num]; 
img3.src = slideShowArray[num+1];

而且

if(num < 0) { 
    num = slideShowArray.length-1; 
} 
productImage.src = slideShowArray[num]; 
img1.src = slideShowArray[num-1]; 
img2.src = slideShowArray[num]; 
img3.src = slideShowArray[num+1];

問題在這裏。當n = 0時，嘗試讀取slideShowArray[-1]，當n = slideShowArray.length - 1時，嘗試讀取slideShowArray[slideShowArray.length]。兩者都不會退出，這就是爲什麼你會得到未定義的值。你必須綁定num價值[0; slideShowArray.length - 1]（即：當n = -1 => N = slideShowArray.length - 1，如果n = slideShowArray.length => N = 0）之間

模運算符可以幫助你

[解決方法]

添加功能：

function getIndex(num, offset, arrayLength) { 
    // Add arrayLength prevents negative number test case 
    return (num + arrayLength + offset) % arrayLength; 
}

刪除您if語句。

當你num++/num--，通過num = getIndex(num, +/-1, slideShowArray.length)

更換當您試圖訪問slideShowArray，由slideShowArray[getIndex(num, +/-1, slideShowArray.length)]

代替直接訪問的唯一強有力的限制是無法啓動num爲負值< slideShowArray.length

來源

2017-08-28 08:02:08 Fefux

那麼哪一個函數next（）和哪一個函數prev（）？所以現在很累，我不能想直接大聲笑 – SDH

你其實並沒有告訴我任何新的東西。（即：如果n = -1 => n = slideShowArray.length - 1，如果n = slideShowArray.length => n = 0）與我已有的完全相同邏輯 – SDH

@SDH請參閱我編輯的答案 – Fefux

這工作。創建變量升壓和降壓：

  var num = 0 
      function next() { 
       var slider = document.getElementById("productImage"); 
       var carouselImg1 = document.getElementById("img1"); 
       var carouselImg2 = document.getElementById("img2"); 
       var carouselImg3 = document.getElementById("img3"); 
// 
       num++ 
       if(num >= slideShowArray.length) 
        {num = 0} 

       var stepup = num + 1; 
       var stepdown = num -1; 

       if(stepup >= slideShowArray.length) 
        {stepup = 0} 
       if(stepdown < 0) 
        {stepdown = slideShowArray.length-1} 

          productImage.src = slideShowArray[num]; 
          img1.src = slideShowArray[stepdown]; 
          img2.src = slideShowArray[num]; 
          img3.src = slideShowArray[stepup]; 

      } 

      function prev() { 
       var slider = document.getElementById("productImage"); 
       var carouselImg1 = document.getElementById("img1"); 
       var carouselImg2 = document.getElementById("img2"); 
       var carouselImg3 = document.getElementById("img3"); 
       // 
       num--; 
       if(num < 0) { 
        num = slideShowArray.length-1; 
       } 

       var stepup = num + 1; 
       var stepdown = num -1; 

       if(stepup >= slideShowArray.length) 
        {stepup = 0} 
       if(stepdown < 0) 
        {stepdown = slideShowArray.length-1} 

       productImage.src = slideShowArray[num]; 
         img1.src = slideShowArray[stepdown]; 
         img2.src = slideShowArray[num]; 
         img3.src = slideShowArray[stepup]; 

      }

來源

2017-08-28 08:50:53 SDH

如何旋轉木馬

回答

相關問題