Question

$(document).ready(function () {

var count = 0;
var images = [
    "http://79.115.69.135:8521/UnderConstruction/Images/deestiny.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/dishonored.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/fallout4.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/fc3.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/halo5.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/me-som.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/rise.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/road4.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/southpark.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/subzero.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/tesv.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/thief.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/watchdogs.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/me-sow.jpg",
    "http://79.115.69.135:8521/UnderConstruction/Images/wot.jpg",

];
var image = $(".background");

image.css("background-image", "url(" + (images[count] + ")"))

setInterval(function () {
    image.fadeOut(1500, function () {
        image.css("background-image", "url(" + images[count++] + ")");
        image.fadeIn(1500);
    });
    if (count == images.length) {
        count = 0;
    }
},10000);     });

我有这个JavaScript代码....每次我想添加一个新图像时，我需要用http://ip.com/folder/folder/img.img写一个新行...... 1.如何让它随机...选择随机图像！ 2.如何使用ip.com只生成1行...当我想添加图像时，从未创建新行！

For Dev who are courious

Answer 1

对于随机数：

改编自MDN：

function getRandomNumber(max) {
  return Math.floor(Math.random() * max);
}

其中max为images.length。你会得到0到images.length - 1之间的随机数。

对于字符串连接：

var baseUrl = "http://79.115.69.135:8521/UnderConstruction/Images/"

您可以删除数组的每个元素中的长字符串，仅保留文件名。那么你可以做一些类似的事情（另外，你的括号太多了）：

image.css("background-image", "url(" + baseUrl + images[count] + ")")

编辑：

首先我定义函数

var getRandomNumber = function (max) { 
  return Math.floor(Math.random() * max) 
}

然后我使用该函数获取第一张图片：

var randomNumber = getRandomNumber(images.length) 
image.css("background-image", "url(" + baseUrl + images[randomNumber] + ")")

然后我使用setInterval中的函数连续生成一个随机数。您甚至可以检查新号码是否与旧号码相同并再次执行，以便您不会选择相同的图像两次（但我会告诉您如何做到这一点））。

setInterval(function () { 
  image.fadeOut(1500, function () { 
    randomNumber = getRandomNumber(images.length) 
    image.css("background-image", "url(" + baseUrl + images[randomNumber] + ")"); 
    image.fadeIn(1500); 
  });
},10000); });

上次修改：

$(document).ready(function () {

  var images = [
    '1.png',
    '2.png',
    '3.png',
    '4.png'
  ]

  var image = $('.background')

  // build the function
  var getRandomNumber = function (max) {
    return Math.floor(Math.random() * max)
  }
  // set a variable to receive a value
  var randomNumber = getRandomNumber(images.length)

  // use the value to index into the array
  image.css('background-image', 'url(' + (images[randomNumber] + ')'))

  setInterval(function () {
    var lastRandomNumber = randomNumber
    // and then do it again, every time
    randomNumber = getRandomNumber(images.length)
    // you could also check whether or not it's the same number and do it over
    while (randomNumber === lastRandomNumber) {
      randomNumber = getRandomNumber(images.length)
    }
    image.fadeOut(1500, function () {
      image.css('background-image', 'url(' + images[randomNumber] + ')')
      image.fadeIn(1500)
    })
  }, 10000)
})

Javascript图片技巧

1 个答案: