Привет!
Задача стоит такая: вывести 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>
|
|