Question

您好我发现了一个脚本，它将图像一个接一个地加载到我的div元素中。一切正常，但我希望它能加载随机图像，这些图像不会在所有images.length的圆圈中重复。

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

如果可以的话，请帮忙。

提前谢谢大家！

<!DOCTYPE html>
<html>
<head>
<title>Warning Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<?php
session_start();

if (isset($_POST['acceptcheckbox']) && $_POST['acceptcheckbox'] == 'Yes') {
$_SESSION['did_accept'] = true;
header ('Location: http://www.google.com');
die('<a href="http://www.google.com">Click here to continue</a>');
}
if (isset($_POST['declinecheckbox']) && $_POST['declinecheckbox'] == 'Yes') {
header ('Location: http://www.yahoo.com');
die('<a href="http://www.yahoo.com">Click here to continue</a>');
}
?>

</head>
<body>
<p>Some text</p>

<form action="" method="POST" id="myForm">
<input type="checkbox" name="accept" id="acceptcheckbox" style="display: none" value="Yes">
<input type="checkbox" name="decline" id="declinecheckbox" style="display: none" value="Yes">
<label>
<input type="button" name="acceptbutton" value="Accept" id="Accept" onclick="CheckAccept()">
Accept</label>
<br>
<label>
<input type="button" name="declinebutton" value="Decline" id="Decline" onclick="CheckDecline()">
Decline</label>
</form>
</body>

<script>
function CheckAccept(){
document.getElementById("acceptcheckbox").checked = true;
document.getElementById("myForm").submit();
}
function CheckDecline(){
document.getElementById("declinecheckbox").checked = true;
document.getElementById("myForm").submit();
}
</script>

</html>

Answer 1

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

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

这是一个完整的对象，它接收一个图像网址数组，然后随机显示它们直到它们全部显示出来。评论应该是非常明确的，但如果我没有解释足够的话，请随意提问。这是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);

Answer 3

你可以尝试制作和数组填充0＆＃39;

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

随机图像加载而不重复

3 个答案: