javascript - 使背景图像自动播放

Question

我一直在尝试制作一个具有悬停在图标上的功能的滑块，应该更改背景图像。我已经完成了这件事，但还要在这个滑块中添加另一件事，即背景图像也应该是自动播放的。

我使用 Elementor 在 WordPress 项目中制作了这个滑块，并使用 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>

标签： javascriptjquerywordpresscontent-management-systemelementor

Answer 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>