Question

目前我正在导入一个将 urls 保存到图像的对象。下面的函数加载来自array的随机图像，从不重复并且效果很好。但是，我想要一个显示最后一张图像的功能。

澄清我一次只显示一张图像。我在下面有一个函数，用于加载array中的下一个图像。我想要一个函数来加载上次看到的图像。允许用户向前和向后扫描array。

更新版本：不检索上一张图片。

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

Answer 1

为什么不能这样：

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]，之前的元素将是您显示优惠的整个历史记录。

Answer 2

<强> HTML

<img src="http://jimdo.wpengine.com/wp-content/uploads/2014/01/tree-247122.jpg" id="box" width="300" height="200">
<input type="button" value="show image" id="showImge" />
<input type="button" value="prev" id="prev" />
<input type="button" value="next" id="next" />

<强> JQuery的

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();
});

DEMO

Answer 3

由于这一点，你的功能做得太多而你失去了灵活性，使实施变更更加复杂。

只需在多个单任务功能之间拆分您的功能即可。在下面的示例中，我假设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];
}

如何前进和后退图像阵列/对象？

3 个答案:

DEMO