Блог

Приведенный ниже JS позволяет отображать слайд-шоу (карусель) с изображениями случайным образом.

Как мне показать его в браузере с определенной шириной и высотой? Давайте приведем, например, высоту: 800 и ширину: 100%?

Я не знаю, интересно ли это, но я создаю сайт с помощью Boostrap 4.

Заранее спасибо.

 <script language="javascript">
  
  var delay=1000 //set delay in miliseconds
  var curindex=0

  var randomimages=new Array()

    randomimages[0]="img/car1.jpg"
    randomimages[1]="img/car5.jpg"
    randomimages[2]="img/car2.jpg"
    randomimages[3]="img/car4.jpg"
    randomimages[4]="img/car3.jpg"
    randomimages[5]="img/car6.jpg"

  var preload=new Array()

  for (n=0;n<randomimages.length;n  )
  {
    preload[n]=new Image()
    preload[n].src=randomimages[n]
  }

  document.write('<img name="defaultimage" src="' randomimages[Math.floor(Math.random()*(randomimages.length))] '">')

  function rotateimage()
  {

  if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
  curindex=curindex==0? 1 : curindex-1
  }
  else
  curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
  }

  setInterval("rotateimage()",delay)

  </script>
  

Укажите следующий класс…

   document.write('<img class="img-size" name="defaultimage" src="' randomimages[Math.floor(Math.random()*(randomimages.length))] '">')
  

и в файле CSS…

 .img-size {
   width:800px;
   height: 100%;
}
  

Или присвоите атрибутам width / height …

   document.write('<img width="800px" height="100%" class="img-size" name="defaultimage" src="' randomimages[Math.floor(Math.random()*(randomimages.length))] '">')