JavaScript: установите фоновое изображение с размером и без повтора из случайного изображения в папке

#javascript #background-image

#javascript #фоновое изображение

Вопрос:

Я новичок в javascript… Я пытаюсь написать функцию, которая извлекает случайное изображение из каталога и устанавливает его в качестве фонового изображения моего баннера div. Мне также нужно установить размер изображения и чтобы оно не повторялось. Вот что у меня есть до сих пор, и это не совсем работает. Чего мне не хватает?

 $(function() {

// some other scripts here

  function bg() {

    var imgCount = 3;
    // image directory
    var dir = 'http://local.statamic.com/_themes/img/';
    // random the images
    var randomCount = Math.round(Math.random() * (imgCount - 1))   1;
    // array of images amp; file name
    var images = new Array();
    images[1] = '001.png',
    images[2] = '002.png',
    images[3] = '003.png',

    document.getElementById('banner').style.backgroundImage = "url('   dir   images[randomCount]   ')";
    document.getElementById('banner').style.backgroundRepeat = "no-repeat";
    document.getElementById('banner').style.backgroundSize = "388px";
  }

}); // end doc ready

1. Вы на самом деле вызываете свою bg функцию где угодно? Приведенный выше код просто определяет его, но не запускает. Кроме того, замените запятые после images[x]='' точкой с запятой.

2. Вы были отчасти правы — я забыл вызвать свою функцию. Но также запятые в URL были неверными. Они должны были быть: «url(» dir images[randomCount] «)»;

3. … и под «запятыми» я имел в виду кавычки.

Ответ №1:

Я некоторое время возился с этим, и я придумал это решение. Просто убедитесь, что у вас есть некоторый контент в элементе «баннер», чтобы он действительно отображался, потому что просто фон не даст размер элементу.

 function bg() {

   var imgCount = 3;
   var dir = 'http://local.statamic.com/_themes/img/';
   // I changed your random generator
   var randomCount = (Math.floor(Math.random() * imgCount));
   // I changed your array to the literal notation. The literal notation is preferred.
   var images = ['001.png', '002.png', '003.png'];
   // I changed this section to just define the style attribute the best way I know how.
   document.getElementById('banner').setAttribute("style", "background-image: url("   dir   images[randomCount]   ");background-repeat: no-repeat;background-size: 388px 388px");
}
// Don't forget to run the function instead of just defining it.
bg();

Ответ №2:

Вот что-то вроде того, что я использую, и оно отлично работает. Сначала я переименовываю все свои фоновые изображения «1.jpg «через что бы то ни было (напр. «29.jpg «). Затем:

 var totalCount = 29;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.getElementById("div1").style.backgroundImage = 'images/' num '.jpg';
document.getElementById("div1").style.backgroundSize="100%";
document.getElementById("div1").style.backgroundRepeat="fixed";
}

Затем запустите функцию ChangeIt() .