Question

我正在开发一个类似于以下内容的图像轮播：

一旦我将所有的JavaScript和JQuery正常运行，我将完成所有正确的样式，因此它不会像现在阶段的下图那样显示100％，所以不要担心。我目前的问题是，当您点击轮播时，其中一个较小的缩略图在ID为img3的img下显示为“未定义”，另一个在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/

Answer 1

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 =＆gt; n = slideShowArray.length - 1，如果n = slideShowArray.length =＆gt; n = 0）

Modulo运营商应该帮助你

[解决]

添加功能：

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设为负值＆lt; slideShowArray.length

Answer 2

这很有用。创建变量stepup和step down：

            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];

            }

如何摆脱旋转木马中未定义的索引

2 个答案: