// Кнопка
const nextvideo = document.getElementById('nextvideo');
// Видео элемент
const videoElement = document.getElementById("video");
// Массив путей
const vids = [
"../assets/img/web_1.mp4",
"../assets/img/web_2.mp4",
"../assets/img/web_3.mp4"
];
// Счётчик
let idx = 0;
// Устанавливаем первый урл как первое видео.
videoElement.src = vids[0]
// Совмещаем всё вместе в обработчике клик
nextvideo.addEventListener('click', function () {
// Цикличность счётчика:
// Если следующее значение выходит за длину массива минус 1 (выражено знаком "меньше"),
// то обнуляем, в противном случае увеличиваем на 1.
idx = idx + 1 < vids.length ? idx + 1 : 0;
const nextVideoUrl = vids[idx];
videoElement.src = nextVideoUrl
})const $days = document.querySelector('.timer__days');
const $hours = document.querySelector('.timer__hours');
const $minutes = document.querySelector('.timer__minutes');
const $seconds = document.querySelector('.timer__seconds');Не знаю как решить.
.pic {
display: inline-block;
}
.pic img {
opacity: 1;
transition: opacity 1s linear;
}
.pic img.invisible {
opacity: 0;
}
button {
padding: 1em;
}
button.active {
background: tomato;
}document.body.addEventListener('click', e => {
if (!e.target.matches('button')) return
const img = document.querySelector('.pic img')
img.classList.add('invisible')
img.ontransitionend = () => {
img.onload = () => img.classList.remove('invisible')
img.src = e.target.dataset.src
document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
e.target.classList.add('active')
}
})да и немного непонятно почему две навигационных панелей
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div><div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>у меня именно не идет свайпВыражайтесь конкретнее, потому что нигде обработчика свайпа у Вас нет. Полагаю, Вы имели в виду переключение картинок.
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide-first">
<img src="https://placehold.co/800x500" alt="" >
</div>
<div class="slide">
<img src="https://placehold.co/801x501" alt="" >
</div>
<div class="slide">
<img src="https://placehold.co/802x502" alt="" >
</div>$(document).ready(function() {
let checkbox = "";
function checkbox_add() {
var isChecked1 = $("#foundation").prop("checked");
var isChecked2 = $("#drop").prop("checked");
if (isChecked1 && isChecked2) {
checkbox = "Выбрано два чекбокса";
} else if (isChecked1) {
checkbox = "Выбран 1 чекбокс";
} else if (isChecked2) {
checkbox = "Выбран 2 чекбокс";
} else {
checkbox = "Ничего не выбрано";
}
console.log(checkbox);
}
$("#foundation, #drop").on('change', checkbox_add);
});почему веб страница выводит в подпункт 1.1. откуда вторая 1?Её добавляет вот этот код:
ol ol li:before {
counter-increment: list2;
content: counter(list1) "." counter(list2) ". ";
}ol ol к какому дочернему элементу идет обращение?Ко всем ol которые вложены на любом уровне в другой ol. Поэтому если Вы во вложенный ol добавите ещё один ol, то нумерация у них будет одинаковая.
как правильно присвоить доп класс, чтобы это работало
.block-name { // название класса блока - block-name
// основные стили
}
.block_type_codestyle{ // добавляем модификатор type со значением codestyle (потому что блок про кодстайл, хотя это не лучший подход для выбора названия класса, но для примера пойдёт)
// стили, специфичные для этого блока. Например, конкретное фоновое изображение.
}<div class="block-name" style="background-image: url('...')" >...</div>google-translate.js:114 Uncaught ReferenceError: TranslateSetCookie is not defined
at HTMLAnchorElement.<anonymous> (google-translate.js:114:9)
at HTMLAnchorElement.dispatch (jquery.min.js:2:41772)
at y.handle (jquery.min.js:2:39791)$('[data-google-lang]').click(function () {
TranslateSetCookie($(this).attr("data-google-lang"))
// Перезагружаем страницу
window.location.reload();
});так не работает консоль
- if (e.keycode === 13) {
+ if (e.keyCode === 13) {Тая Зотова учу javascriptОдно из важнейших, чему стоит научиться в первую очередь - отладка своего кода.