Нужно чтобы при загрузке страницы, показывало один из div
Пример кода:
<div class="banner">
<a><img src="#"></a>
</div>
<div class="banner">
<a><img src="#"></a>
</div>
<div class="banner">
<a><img src="#"></a>
</div>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНужно чтобы при загрузке страницы, показывало один из div
Пример кода:
<div class="banner">
<a><img src="#"></a>
</div>
<div class="banner">
<a><img src="#"></a>
</div>
<div class="banner">
<a><img src="#"></a>
</div>
Решение в лоб:
HTML:
<div id="container">
<div class="banner">
<a><img src="#"></a>
</div>
<div class="banner">
<a><img src="#"></a>
</div>
<div class="banner">
<a><img src="#"></a>
</div>
</div>
JS:
let container = document.getElementById("container");
let children = container.children;
let index = Math.floor(Math.random() * children.length);
for(let i = 0; i < children.length; i++) {
if(index != i) {
children[i].style.display= "none";
}
}
let children = document.querySelectorAll("#container .banner");
- есть еще такая штука)
30 мая 2020 в 22:02
JS:
$(document).ready(function() {
const randomNum = Math.floor(Math.random() * 3) + 1;
const bannerIndex = randomNum - 1;
const banner = document.getElementsByClassName('banner')[bannerIndex];
$(banner).addClass('display');
})
CSS:
.banner {
display: none;
}
.banner.display {
display: block;
}
randomNum
, если он создается с +1, только чтобы потом из него вычесть -1... const bannerIndex = Math.floor(Math.random() * 3)
, нет?) А getElementsByClassName (так понимаю, использован только чтобы взять оттуда один элемент), для этого в jQuery есть метод .eq()
→ $(".banner").eq( bannerIndex ).addClass("display")
30 мая 2020 в 21:55