随机图像加载而不重复

Random images load without repeat

本文关键字：图像 加载 随机      更新时间：2023-09-26

嗨，我找到了一个脚本，可以将图像一个接一个地加载到我的div 元素中。一切正常，但我希望它加载随机图像，这些图像不会在所有图像长度的圆圈中重复。

由于我是一个完全的新手，我试图做一些事情，但大多数时候我能够加载随机图像，但没有重复检查。

如果可以，请帮忙。

提前谢谢大家！ 

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

您可以使用下面答案中解释的随机播放方法。

如何洗牌数组？

并获取数组上的第一个元素

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

这是一个完整的对象，它接收图像 url 数组，然后随机显示它们，直到显示所有内容。评论应该非常具有解释性，但是如果我没有充分解释某些内容，请随时提问。这是一个小提琴

//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);

你可以尝试用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);
});
相关文章：