Javascript 图片技巧

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.How 我可以让它随机吗...select 随机图片！ 2.How 仅用 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 图片技巧

Javascript Image Trick

html

javascript

css

slide