如何去除旋转木马中的未定义索引
我正在开发一个类似于以下内容的图像旋转木马：
一旦所有的JavaScript和JQuery都能正常运行，我就会把所有的东西都正确地呈现出来，这样它就不会100%地像下面的图片一样显示在它的当前阶段，所以不要担心。我当前的问题是，当您通过旋转木马单击时，其中一个较小的缩略图在id img3的img下显示为“未定义”，另一个在img1下显示为“未定义”。我知道问题在于我的索引试图在数组的末尾或开始调用不存在的东西。如何在我的JavaScript中修复这个问题，这样数组中的第一个索引就会显示出来，而不是一个不存在的索引？
我去掉了下面不相关的代码，这样您就可以看到我到目前为止拥有的内容：
<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：https://jsfiddle.net/kdd1gppz/中向您展示相关的JSON数据
回答 2
Stack Overflow用户
发布于 2017-08-28 00:02:08
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
Stack Overflow用户
发布于 2017-08-28 00:50:53
这个成功了。创建变量stepup并退出：
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];
}https://stackoverflow.com/questions/45913416
复制相似问题
腾讯云开发者
