Javascript Image Trick

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

I have this JavaScript code....every time I want to add a new image,I need to write a new line with http://ip.com/folder/folder/img.img... 1.How can i make it to be random...select random images! 2.How to make only 1 line with ip.com...never made a new line when i want to add a image!

For Dev who are courious

Answer 1

For the random numbers:

Adapted from MDN:

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

where max is images.length. You'll get random numbers between 0 and images.length - 1.

For the string concatenation:

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

You can remove the long string in each element of the array, keeping only the filenames. Then you can just do something like (also, you had too many parentheses):

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

Edit:

First I define the function

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

Then I use the function to get the first image:

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

Then I use the function in the setInterval to continuously generate a random number. You could even go so far as to check whether the new number is the same as the old one and do it again so that you don't ever choose the same image twice (but I'll leave you to figure out how to do that).

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

Last edit:

$(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)
})