JSFiddle - React, Tailwind, and code Playground
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" />
JavaScript
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();
});