Хобрук: Ваш путь к мастерству в программировании

Чтобы фоновые изображения проигрывались автоматически

Я пытался сделать слайдер с функцией наведения на значок, фоновые изображения должны быть изменены. Я добился этого, но еще одна вещь, которую нужно добавить в этот слайдер, - это то, что фоновые изображения также должны воспроизводиться автоматически.

Я сделал этот слайдер в проекте WordPress с помощью Elementor и создал собственный слайдер, используя манипуляции с javascript dom.

Как я могу добиться обеих вещей, таких как первое автоматическое воспроизведение фоновых изображений, а также, когда кто-либо наводит курсор на значок, фоновое изображение также должно быть изменено?

Код JavaScript для запуска функции изменения фонового изображения при наведении на значок.

<script>



const backgroundChange = document.querySelector('#hero-section');

const icon1 = document.querySelector('.icon-1');

icon1.addEventListener('mouseover', function(){
    backgroundChange.style.backgroundImage = 'url(https://webchargers.in/ghc/wp-content/uploads/2020/09/first-slide.png)'
});

const icon2 = document.querySelector('.icon-2');

icon2.addEventListener('mouseover', function(){
    backgroundChange.style.backgroundImage = 'url(https://webchargers.in/ghc/wp-content/uploads/2020/09/second-slide-1.png)'
});


const icon3 = document.querySelector('.icon-3');

icon3.addEventListener('mouseover', function(){
    backgroundChange.style.backgroundImage = 'url(https://webchargers.in/ghc/wp-content/uploads/2020/09/third-slide.png)'
});

const icon4 = document.querySelector('.icon-4');

icon4.addEventListener('mouseover', function(){
    backgroundChange.style.backgroundImage = 'url(https://webchargers.in/ghc/wp-content/uploads/2020/09/fourth-slide.png)'
});

const icon5 = document.querySelector('.icon-5');

icon5.addEventListener('mouseover', function(){
    backgroundChange.style.backgroundImage = 'url(https://webchargers.in/ghc/wp-content/uploads/2020/09/fifth-slide.png)'
});

const icon6 = document.querySelector('.icon-6');

icon6.addEventListener('mouseover', function(){
    backgroundChange.style.backgroundImage = 'url(https://webchargers.in/ghc/wp-content/uploads/2020/09/sixth-slide.png)'
});


backgroundChange.style.autoPlay = 'true';





</script>

<style>
#hero-section{
transition: background 0.4s linear;
}





</style>
javascript wordpress jquery content-management-system elementor
09.09.2020

  • Поскольку вы не предоставили минимальный рабочий пример, трудно представить, как это должно выглядеть, и 09.09.2020

Ответы:


1

Решение состоит в том, чтобы создать массив ссылок на изображения с автоматическим воспроизведением, а затем с помощью setTimeout() создать бесконечный цикл, в котором вы будете изменять фоновое изображение элемента из этого массива. Пока кто-то наводит курсор на фон — установите пользовательское фоновое изображение и установите логический режим автовоспроизведения на false. Что-то типа :

<H2 style="color:cyan">Hover mouse to switch-off autoplay and change background</H2>
<script>
var images = ['https://upload.wikimedia.org/wikipedia/commons/3/34/Midland_4-2-2_No._673_Rainhill_1980_%E2%80%93_edited.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/ArcodelaMacarena.jpg/800px-ArcodelaMacarena.jpg'
];
var ix = 0;
var autoplay = true;

function loop(pause=2000) {
      setTimeout(function () {
          if (autoplay) {
            document.body.style.backgroundImage = `url('${images[ix]}')`;
            ix = (ix+1)%images.length;
          }
          loop();
      }, pause);
}

document.addEventListener("mouseenter", function( event ) {
  autoplay = false;
  document.body.style.backgroundImage = `url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Witton_Lakes_-_Lower_%28448543147%29.jpg/1024px-Witton_Lakes_-_Lower_%28448543147%29.jpg')`;
}, false);

document.addEventListener("mouseleave", function( event ) {
  autoplay = true;
}, false);

loop(0);

</script>

09.09.2020
Новые материалы
Учебные заметки JavaScript Object Oriented Labs
Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..
Разбор строк запроса в vue.js
Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..
Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
«Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..
Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
Как настроить Selenium в проекте Angular
Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
Аргументы прогрессивного улучшения почти всегда упускают суть
В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
Введение в Джанго Фреймворк
Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..