隨機圖像加載沒有重複

Question

嗨我發現一個腳本，將圖像一個接一個地加載到我的div元素。一切工作正常，但我希望它加載隨機圖像不重複所有images.length的一圈。

由於我是一個全新的在這個我試圖做的事情，但大部分時間我能夠加載隨機圖像，但沒有重複檢查。

如果可以，請幫助。

謝謝大家提前！

<script src="js_vrt/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(window).load(function() { 
var images = ['img_vrt/pozadine/1p.jpg', 'img_vrt/pozadine/2p.jpg', 'img_vrt/pozadine/3p.jpg', 'img_vrt/pozadine/4p.jpg']; 
var image = $('#pozad'); 
var i = Math.floor((Math.random() * images.length)); 
var ist; 
//Initial Background image setup 
image.css('background-image', 'url(' + images[i++] + ')'); 
//Change image at regular intervals 
setInterval(function() { 

image.fadeOut(1500, function() { 
image.css('background-image', 'url(' + images[i++] + ')'); 
image.fadeIn(1500); 
}); 
if (i == images.length) 
    i = 0; 
}, 5000); 
}); 
</script> 

Answer 1

您可以使用下面答案中解釋的shuffle方法。

How can I shuffle an array?

，讓你的陣列上

image.css('background-image', 'url(' + images[0] + ')'); 

您可以此方法，在同一圖像得到加載後洗牌陣列找到問題的第一要素。在這種情況下，我建議您在變量中存儲顯示的最後一個圖像的名稱，並在數組進行混洗之前，測試第一個元素是否與最後一個圖像相同。

var lastImageLoaded =''; 

setInterval(function() { 
    shuffle(images); 
    var imageUrl = images[0]; 
    if(lastImageLoaded !== ''){ // Handle the first load 
     while(lastImageLoaded === images[0]){ 
      shuffle(images); 
     } 
    } 
    lastImageLoaded = image; 
    image.fadeOut(1500, function() { 
     image.css('background-image', 'url(' + imageUrl + ')'); 
     image.fadeIn(1500); 
}); 

Answer 2

你可以嘗試讓和陣充滿0的

var points = new Array(0,0,0, 0) 
//each one representing the state of each image 
//and after that you make the random thing 
var images = ['img_vrt/pozadine/1p.jpg', 'img_vrt/pozadine/2p.jpg', 'img_vrt/pozadine/3p.jpg', 'img_vrt/pozadine/4p.jpg']; 
while (points[i]!=1){ 
var image = $('#pozad'); 
var i = Math.floor((Math.random() * images.length)); 
var ist; 
} 
setInterval(function() { 

image.fadeOut(1500, function() { 
image.css('background-image', 'url(' + images[i++] + ')'); 
points[i]=1; 
image.fadeIn(1500); 
}); 

Answer 3

這是一個完整的對象，需要在圖像的URL的數組，然後隨機顯示，直到它已表現出他們所有。評論應該很好解釋，但如果我沒有足夠的解釋，可以隨時提問。這裏是一個fiddle

//Object using the Revealing Module pattern for private vars and functions 
var ImageRotator = (function() { 
    //holds the array that is passed in 
    var images; 
    // new shuffled array 
    var displayImages; 
    // The parent container that will hold the image 
    var image = $("#imageContainer"); 
    // The template image element in the DOM 
    var displayImg = $(".displayImg"); 
    var interval = null; 

    //Initialize the rotator. Show the first image then set our interval 
    function init(imgArr) { 
    images = imgArr; 
    // pass in our array and shuffle it randomly. Store this globally so 
    // that we can access it in the future 
    displayImages = shuffle(images); 
    // Grab our last item, and remove it 
    var firstImage = displayImages.pop(); 
    displayImage(firstImage); 
    // Remove old image, and show the new one 
    interval = setInterval(resetAndShow, 5000); 
    } 
    // If there are any images left in our shuffled image array then grab the one at the end and remove it. 
    // If there is an image present in the Dom, then fade out clear our image 
    // container and show the new image 
    function resetAndShow() { 
    // If there are images left in shuffled array... 
    if (displayImages.length != 0) { 
     var newImage = displayImages.pop(); 
     if (image.find("#currentImg")) { 
     $("#currentImg").fadeOut(1500, function() { 
      // Empty the image container so we don't have multiple images 
      image.empty(); 
      displayImage(newImage); 
     }); 
     } 
    } else { 
    // If there are no images left in the array then stop executing our interval. 
     clearInterval(interval); 
    } 

    } 
    // Show the image that has been passed. Set the id so that we can clear it in the future. 
    function displayImage(newImage) { 
    //Grab the image template from the DOM. NOTE: this could be stored in the code as well. 
    var newImg = displayImg; 
    newImg.attr("src", newImage); 
    image.append(newImg); 
    newImg.attr("id", "currentImg"); 
    newImg.fadeIn(1500); 
    } 
    // Randomly shuffle an array 
    function shuffle(array) { 
    var currentIndex = array.length, 
     temporaryValue, randomIndex; 

    // While there remain elements to shuffle... 
    while (0 !== currentIndex) { 
     // Pick a remaining element... 
     randomIndex = Math.floor(Math.random() * currentIndex); 
     currentIndex -= 1; 

     // And swap it with the current element. 
     temporaryValue = array[currentIndex]; 
     array[currentIndex] = array[randomIndex]; 
     array[randomIndex] = temporaryValue; 
    } 
    return array; 
    } 

    return { 
    init: init 
    } 
}); 
var imgArr = [ 
    "https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg", 
    "https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg", 
    "https://i.ytimg.com/vi/icqDxNab3Do/maxresdefault.jpg", 
    "http://www.funny-animalpictures.com/media/content/items/images/funnycats0017_O.jpg", 
    "https://i.ytimg.com/vi/OxgKvRvNd5o/maxresdefault.jpg" 
] 
// Create a new Rotator object 
var imageRotator = ImageRotator(); 
imageRotator.init(imgArr);