Salut, j'ai trouvé un script qui charge les images les unes après les autres dans mon élément div. Tout fonctionne bien, mais j'aimerais qu'il charge des images aléatoires qui ne se répètent pas dans un cercle de toutes les images.longueur.

Étant donné que je suis totalement nouveau dans ce domaine, j'ai essayé de faire quelque chose, mais la plupart du temps, je suis capable de charger des images aléatoires mais sans répéter la vérification.

Si vous le pouvez, aidez-moi.

Merci d'avance à tous!

<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>
3
Alan_dj 9 mars 2016 à 02:06

3 réponses

Meilleure réponse

Vous pouvez utiliser la méthode aléatoire expliquée dans la réponse ci-dessous.

Comment mélanger un tableau?

Et obtenez le premier élément de votre tableau

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

Vous pouvez rencontrer un problème avec cette méthode, lorsque la même image est chargée après avoir mélangé le tableau. Dans ce cas, je vous recommande de stocker dans une variable le nom de la dernière image affichée, et avant que le tableau ne soit mélangé, testez simplement si le premier élément est égal à la dernière image.

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);
});
1
Community 23 mai 2017 à 11:59

Voici un objet complet qui prend un tableau d'URL d'images, puis les affiche de manière aléatoire jusqu'à ce qu'il les ait toutes affichées. Les commentaires devraient être assez explicatifs, mais n'hésitez pas à poser des questions si je n'ai pas suffisamment expliqué quelque chose. Voici un violon

//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);
1
Elijah Tate 9 mars 2016 à 03:23

Vous pouvez essayer de faire un tableau rempli de 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);
});
0
Jorge Mario Raymundo Acosta 9 mars 2016 à 00:01