Блог

Это мое первое сообщение здесь, поэтому я приношу извинения за любые ошибки. Кроме того, я новичок в JavaScript! Это прекрасный язык программирования, но у меня с ним возникли некоторые проблемы.

Теперь перейдем к вопросу.

Моя цель проста: я хочу отображать рандомизированные изображения в одной части моего сайта. Загвоздка в том, что, поскольку веб-сайт имеет адаптивный дизайн, есть два набора изображений, по одному для каждого из двух размеров разрешения экрана, с которыми я работаю.

Итак, другими словами, чего я хочу добиться: один набор изображений рандомизируется / отображается при использовании меньших экранов, другой набор рандомизируется / отображается при использовании больших экранов.

Что я сделал до сих пор, так это:

1. Используйте код JavaScript для рандомизации изображений. Это выглядит так:

 <script>
jQuery(function(){
    var objetos = new Array();

    objetos[0] = "heregoesmypicture";
    objetos[1] = "heregoesmypicture";
    objetos[2] = "heregoesmypicture";
    objetos[3] = "heregoesmypicture";
    objetos[4] = "heregoesmypicture";
    objetos[5] = "heregoesmypicture";
    objetos[6] = "heregoesmypicture";
    objetos[7] = "heregoesmypicture";
    objetos[8] = "heregoesmypicture";
    objetos[9] = "heregoesmypicture";

    function aleatorio() {
       var azar = Math.floor(Math.random() * objetos.length);
       document.getElementById("mi-imagenali").src = objetos[azar];
    }

window.onload=aleatorio;
});
    </script>
 

Итак, есть ли способ ограничить количество отображаемых изображений в зависимости от размера экрана?
Например, чтобы изображения 0-4 отображались при меньшем разрешении, а изображения 5-9 — при большем.

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

Вы можете использовать CSS @media, чтобы скрыть «лишние» изображения для меньших размеров экрана. Например, следующий CSS будет скрывать изображения с классом «hideme», если размер экрана составляет 600 пикселей в ширину или меньше. При необходимости вы можете использовать несколько абзацев @media. Просто добавьте class .hideme к набору изображений, которые вы хотите скрыть на небольших дисплеях.

 @media only screen and (max-width: 600px) {
  .hideme {
    display:none;
  }
}