编辑（要求）

Question

我正在创建一个动态加载16个div的数组。我已经用CSS将所有具有绝对位置的div堆叠在一起。现在，我想显示块并以设置的时间间隔不显示任何块，如果到达一个循环的起点和终点，则一遍又一遍地重复此操作。

这是我的代码：

if (window.innerWidth < 767) {
    images.forEach((image, index) => {
        let imageDiv = document.createElement('div');
        imageDiv.className = `bg-image bg-image-bg${image}`;
        hero.appendChild(imageDiv);
        console.log(index);
        console.log(imageDiv);
    });
}

它会生成带有类bg-image的16个div。现在，我想显示块，并且不显示1到16的块，将其重复一遍。

这是我想要实现的：https://codepen.io/thomasvaeth/pen/JrjyjW（但没有悬停效果）。

我该怎么做？

谢谢。

Answer 1

在创建img div时，您将它们压入一个数组，然后每500毫秒（在我的示例中）调用相同的函数，即可隐藏所有img，并逐步显示正确的img：

let imgArr = [];
if (window.innerWidth < 767) {
    images.forEach((image, index) => {
        let imageDiv = document.createElement('div');
        imageDiv.className = `bg-image bg-image-bg${image}`;
        hero.appendChild(imageDiv);
        console.log(index);
        console.log(imageDiv);
        imgArr.push(imageDiv);
    });
}

let counter = 0;

function roll() {
    imgArr.map( img => img.style.display = 'none' );
    imgArr[counter].style.display = 'block';
    counter++;
    if(counter == imgArr.length - 1) counter = 0;
    setTimeout(()=>roll(), 500);
}

setTimeout(() => roll(), 0);

或：

let counter = 0;

function roll() {
    imgArr.map( img => img.style.display = 'none' );
    imgArr[counter].style.display = 'block';
    counter++;
    if(counter == imgArr.length - 1) counter = 0;
}

setInterval(() => roll(), 500);

编辑（要求）

如果屏幕大于1200，我如何停止功能滚动？

因此，在这种情况下，您应该使用setInterval()函数：

function roll() {
    imgArr.map( img => img.style.display = 'none' );
    imgArr[counter].style.display = 'block';
    counter++;
    if(counter == imgArr.length - 1) counter = 0;
}

let interv = setInterval(() => roll(), 500);

window.onresize = () => {
    let windowWidth = window.innerWidth||d.documentElement.clientWidth||d.getElementsByTagName('body')[0].clientWidth;
    clearInterval(interv);
    if(windowWidth < 1200) {
        interv = setInterval(() => roll(), 500);
    } else {
        clearInterval(interv);
    }
}

javascript-如何显示块并且不使用JS绝对堆叠所有背景图像？

1 个答案:

编辑（要求）