使背景图像自动播放答案

【问题标题】：To make an background images autoplay使背景图像自动播放
【发布时间】：2020-12-27 12:01:39
【问题描述】：

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

我在 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 jquery wordpress content-management-system elementor

【解决方案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>

【讨论】：