Javascript 如何在图像阵列/对象中前后移动？

目前我正在导入一个对象，该对象保存图像的URL。下面的函数从数组中加载随机图像，从不重复，效果很好。但是，我想要一个函数，显示最后看到的图像

为了澄清，我一次只显示一张图像。下面有一个函数，用于加载数组中的下一个图像。我想有一个函数来加载最后看到的图像。允许用户在阵列中前后扫描

更新版本：不检索以前的图像

window.shownCache = [];

function receivedData(data) {
      function nextPicture() {
            if (window.currentlyShownOffer) {
                var tagArray = data[window.currentlyShownOffer.Tag];
                tagArray.splice(tagArray.indexOf(currentlyShownOffer), 1);
                //alert(window.currentlyShownOffer.ImagesId);
                }


         var tags = Object.keys(data);
         var randomTag = tags[Math.floor(Math.random() * tags.length)];
         var tagArray = data[randomTag];


   window.currentlyShownOffer = tagArray[Math.floor(Math.random() * tagArray.length)];
   window.shownCache.push(window.currentlyShownOffer);
   document.getElementById('top5').src = window.currentlyShownOffer.ImagesPath;
   alert(window.shownCache);
   };

   nextPicture();

   function lastPicture() {
        document.getElementById('top5').src = window.shownCache[window.shownCache.length - 1].ImagesPath;
        };

---

为什么不做一些像：

window.shownCache = [];
function changeOfferPicture() {
  …
  window.currentlyShownOffer = tagArray[Math.floor(Math.random() * tagArray.length)];
  window.shownCache.push(window.currentlyShownOffer);
  document.getElementById('top5').src = window.currentlyShownOffer.ImagesPath;
  }

现在，您最后一次展示的优惠将始终位于widow.shownCache[window.shownCache.length-1]，之前的元素将是您展示的优惠的整个历史记录。

HTML

---

您的功能做得太多，因此您失去了灵活性，使更改的实现更加复杂

只需将您的功能划分为多个单任务功能。在下面的示例中，我假设changeOfferImage实际上更改了图像的src，并且nextRandomOfferImage返回下一个随机图像。您将调用showNextOfferImage前进，调用showPreviousOfferImage后退

var displayedOfferImages = [], imageIndex = -1;

function showNextOfferImage() {

    var lookingInDisplayedImages = imageIndex < (displayedOfferImages.length - 1),
        offerImage;

    if (lookingInDisplayedImages) {
        offerImage = nextDisplayedImage();
    } else {
        offerImage = nextRandomOfferImage();
        imageIndex = displayedOfferImages.push(offerImage) - 1;
    }

    changeOfferPicture(offerImage);

}

function showPreviousOfferImage() {
    var previousImage = previousDisplayedImage();

    if (previousImage) changeOfferPicture(offerImage);
}

function previousDisplayedImage() {
    return displayedOfferImages[--imageIndex];
}

function nextDisplayedImage() {
    return displayedOfferImages[++imageIndex];
}

---

在查找最后一张图像时，我当前收到了损坏的图像。我将函数添加到上述问题中。@moss它应该是document.getElementById'top5'.src=window.shownCache[window.shownCache.length-1].ImagesPath；我更新了上面的内容。lastPicture功能不起作用。您可以使用prev image功能进行更具体的更改。我不知道怎么写。特别是你所说的obj.find这个演示不太好，下一个按钮不起作用，上一个按钮只起作用一次。我还没有时间完整地写它。通过一些更改，您可以以相同的方式实现它。

var items = [{
    ImagesPath: 'http://jimdo.wpengine.com/wp-content/uploads/2014/01/tree-247122.jpg'
}, {
    ImagesPath: 'http://www.wired.com/wp-content/uploads/images_blogs/rawfile/2013/11/offset_RonnyRitschel_23712-1-660x660.jpg'
}, {
    ImagesPath: 'http://www.thehindu.com/multimedia/dynamic/01654/THRHLAP10THINGSTOS_1654673g.jpg'
}, {
    ImagesPath: 'http://www.thehindu.com/multimedia/dynamic/01654/THRHLAP10THINGSTOS_1654676g.jpg'
}];
var rndIndexCount = 0;
var cache = [{
    RndIndex: rndIndexCount,
    ImageIndex: 0
}];
var currentCache;

function changeOfferPicture() {
    rndIndexCount++
    var imageIndex = Math.floor(Math.random() * items.length);
    var currentItem = items[imageIndex];
    currentCache = {
        RndIndex: rndIndexCount,
        ImageIndex: imageIndex
    };
    cache.push(currentCache);
    document.getElementById('box').src = currentItem.ImagesPath;
}
$("#prev,#next").click(function () {
    var isNext = $(this).attr("id") == "next";
    if (currentCache) {
        var result = cache.filter(function (obj) {
            var findIndex = isNext ? currentCache.RndIndex + 1 : currentCache.RndIndex - 1;
            console.log(findIndex);
            return obj.RndIndex == findIndex;
        })[0];
        if (result) {
            console.log(result.RndIndex + " , " + result.ImageIndex);
            currentCache = result;
            document.getElementById('box').src = items[currentCache.ImageIndex].ImagesPath;
        }
    }
});
$("#showImge").click(function () {
    changeOfferPicture();
});

var displayedOfferImages = [], imageIndex = -1;

function showNextOfferImage() {

    var lookingInDisplayedImages = imageIndex < (displayedOfferImages.length - 1),
        offerImage;

    if (lookingInDisplayedImages) {
        offerImage = nextDisplayedImage();
    } else {
        offerImage = nextRandomOfferImage();
        imageIndex = displayedOfferImages.push(offerImage) - 1;
    }

    changeOfferPicture(offerImage);

}

function showPreviousOfferImage() {
    var previousImage = previousDisplayedImage();

    if (previousImage) changeOfferPicture(offerImage);
}

function previousDisplayedImage() {
    return displayedOfferImages[--imageIndex];
}

function nextDisplayedImage() {
    return displayedOfferImages[++imageIndex];
}