Модераторы: Poseidon
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Вывод случайных картинок их папки на Javascript 
:(
    Опции темы
Гениальный123Робот
Дата 5.10.2022, 23:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 257
Регистрация: 2.1.2006

Репутация: нет
Всего: нет



Привет! 
Задача стоит такая: вывести 5 случайных картинок из 20 предоставленных в папке images, они именуются 1.jpg, 2.jpg, 3.jpg и т.д.   В коде они успешно выводятся в нужные поля, но есть две проблемы.  
Первая проблема в том, что картинки могут повторяться и не могу это устранить. Другой нюанс, что они вставляются подряд с какой-то картинки - например, 5, 6, 7, 8 и 9. Тоже не могу это устранить, нужен полный рандом типа 4-18-6-10-13. И нужно, чтобы они не повторялись (все 5 разных). Я подумал, что после прохождения цикла в его конце можно удалять из массива уже добавленный элемент, чтобы при 2 и 3 итерациях их невозможно было добавить, но не смог корректно реализовать. Можете помочь? Спасибо!  

Код

let image = new Array();
 image[0]="/images/1.JPG"
 image[1]="/images/2.JPG"
 image[2]="/images/3.JPG"
 image[3]="/images/4.JPG"
 image[4]="/images/5.JPG"
 image[5]="/images/6.JPG"
 image[6]="/images/7.JPG"
 image[7]="/images/8.JPG"
 image[8]="/images/9.JPG"
 image[9]="/images/10.JPG"
 image[10]="/images/11.JPG"
 image[11]="/images/12.JPG"
 image[12]="/images/13.JPG"
 image[13]="/images/14.JPG"
 image[14]="/images/15.JPG"
 image[15]="/images/16.JPG"
 image[16]="/images/17.JPG"
 image[17]="/images/18.JPG"
 image[18]="/images/19.JPG"
 image[19]="/images/20.JPG"
 

 let a = Math.round(Math.random()*11)

 for(i=0;i<5;i++){
  let d = document.querySelectorAll('.card__background')
   document.querySelectorAll('.card__background')[i].style.backgroundImage = "url(images/"+i+".JPG)"
// delete image[i]
  }


Код

<a class="cardos" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557187666-4fd70cf76254?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </a>
    <a class="cardos" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </li>
    <a class="cardos" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </a>
    <a class="cardos" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </a>


Это сообщение отредактировал(а) Гениальный123Робот - 6.10.2022, 18:36
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Правила форума "Центр помощи"

ВНИМАНИЕ! Прежде чем создавать темы, или писать сообщения в данный раздел, ознакомьтесь, пожалуйста, с Правилами форума и конкретно этого раздела.
Несоблюдение правил может повлечь за собой самые строгие меры от закрытия/удаления темы до бана пользователя!


  • Название темы должно отражать её суть! (Не следует добавлять туда слова "помогите", "срочно" и т.п.)
  • При создании темы, первым делом в квадратных скобках укажите область, из которой исходит вопрос (язык, дисциплина, диплом). Пример: [C++].
  • В названии темы не нужно указывать происхождение задачи (например "школьная задача", "задача из учебника" и т.п.), не нужно указывать ее сложность ("простая задача", "легкий вопрос" и т.п.). Все это можно писать в тексте самой задачи.
  • Если Вы ошиблись при вводе названия темы, отправьте письмо любому из модераторов раздела (через личные сообщения или report).
  • Для подсветки кода пользуйтесь тегами [code][/code] (выделяйте код и нажимаете на кнопку "Код"). Не забывайте выбирать при этом соответствующий язык.
  • Помните: один топик - один вопрос!
  • В данном разделе запрещено поднимать темы, т.е. при отсутствии ответов на Ваш вопрос добавлять новые ответы к теме, тем самым поднимая тему на верх списка.
  • Если вы хотите, чтобы вашу проблему решили при помощи определенного алгоритма, то не забудьте описать его!
  • Если вопрос решён, то воспользуйтесь ссылкой "Пометить как решённый", которая находится под кнопками создания темы или специальным флажком при ответе.

Более подробно с правилами данного раздела Вы можете ознакомится в этой теме.

Если Вам помогли и атмосфера форума Вам понравилась, то заходите к нам чаще! С уважением, Poseidon, Rodman

 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Центр помощи | Следующая тема »


 




[ Время генерации скрипта: 0.0981 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.