如何旋转木马

我开发的图像旋转木马，看起来像工作摆脱未定义指数如下：如何旋转木马

我将通过和风格都正确，一旦我拥有所有的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

如何旋转木马

回答

相关问题