有機會使用此代碼進行回圈嗎？

我在我的 html 頁面中有部分放置了 9 個影像，這些影像取決于 X 滑鼠位置（clientX）。一切正常，但我可以對其進行編碼的唯一方法是非常長且非最佳。我確信通過使用回圈或 forEach 方法可以做得更優化，但我的技能不允許我這樣做。你有什么建議嗎？

   const fotos = [...document.getElementsByClassName('mousemovefoto')];
   const startfoto = document.querySelector('.startfoto');

   window.addEventListener('mousemove', function (event) {

const x = event.clientX;


if (x < 211) {
    startfoto.style.display = 'inline-block'
    fotos[0].style.display = 'none'
} else if (x >= 211 && x < 422) {
    fotos[0].style.display = "inline-block"
    fotos[1].style.display = 'none'
    startfoto.style.display = 'none'
}  else if (x >= 422 && x < 633) {
    fotos[1].style.display = 'inline-block'
    fotos[0].style.display = "none"
    fotos[2].style.display = "none"
    startfoto.style.display = 'none'
} else if (x >= 633 && x < 844) {
    fotos[2].style.display = 'inline-block'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    startfoto.style.display = 'none'
    fotos[3].style.display = 'none'
} else if (x >= 844 && x < 1055) {
    fotos[3].style.display = 'inline-block'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[4].style.display = 'none'
    startfoto.style.display = 'none'
} else if (x >= 1055 && x < 1266) {
    fotos[4].style.display = 'inline-block'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[5].style.display = "none"
    startfoto.style.display = 'none'
}  else if (x >= 1266 && x < 1477) {
    fotos[5].style.display = 'inline-block'
    fotos[4].style.display = 'none'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[6].style.display = "none"
    startfoto.style.display = 'none'
}  else if (x >= 1477 && x < 1688) {
    fotos[6].style.display = 'inline-block'
    fotos[5].style.display = 'none'
    fotos[4].style.display = 'none'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[7].style.display = "none"
    startfoto.style.display = 'none'
} else if (x >= 1688 && x < 3000) {
    fotos[7].style.display = 'inline-block'
    fotos[6].style.display = 'none'
    fotos[5].style.display = 'none'
    fotos[4].style.display = 'none'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    startfoto.style.display = 'none' 
}
})

我在沒有全部的情況下嘗試這個

fotos[x].style.display = "none" 

但是如果沒有它，當 foto 發生變化時，以前的 foto 就會消失，我在現場有 9 張照片。

我也試圖添加 css 類

.active {
display: inline-block;
}

并通過滑鼠移動添加/洗掉它，但更改后照片也顯示在彼此下方。

你有什么建議嗎？

uj5u.com熱心網友回復：

const fotos = [...document.getElementsByClassName('mousemovefoto')];
   const startfoto = document.querySelector('.startfoto');

   window.addEventListener('mousemove', function (event) {

const x = event.clientX;

let p = Math.trunc(x/211)

if (p == 0) {
   startfoto.style.display = 'inline-block'
   fotos[0].style.display = 'none'
}else startfoto.style.display = 'none'

for (let i = 0; i < p ; i  ){
    fotos[i].style.display = 'none'
}
fotos[p-1].style.display='inline-block'
  


})

uj5u.com熱心網友回復：

由于您似乎正在使用等距 bin（211 個），您可以將其變成這樣的回圈

const binWidth = 211;
const k = Math.floor((x - binWidth) / binWidth);
if (k < 0) {
    // k < 0 when x < 211
    startfoto.style.display = 'inline-block'
    fotos[0].style.display = 'none'
} else {
    // k = 0, 1, 2, 3... 7 (when x >= 1688)
    for (let i = k   1; i >= 0; i--) {
        if (i < fotos.length) {
            fotos[i].style.display = 'none';
        }
    }
    fotos[k].style.display = 'inline-block';
    startfoto.style.display = 'none';
}

uj5u.com熱心網友回復：

CSS 負責處理諸如懸停和淡入淡出等瑣碎的展示功能。opacity, transition,:hover就是你所需要的。使用 JavaScript 來銷毀和創建 HTML。

section {
  display: flex;
  justify-content: center;
}

figure {
  width: 100px;
  margin: 0;
  cursor: pointer;
}

img {
  object-fit: contain;
  width: 100px;
  opacity: 0;
  transition: 0.3s;
}

figure:hover img {
  opacity: 1;
}

figcaption {
  text-align: center;
}

<section>
  <figure>
    <img src='https://i.ibb.co/hZj77BZ/lena01.jpg'>
    <figcaption>I</figcaption>
  </figure>
  <figure>
    <img src='https://i.ibb.co/hZj77BZ/lena01.jpg'>
    <figcaption>II</figcaption>
  </figure>
  <figure>
    <img src='https://i.ibb.co/hZj77BZ/lena01.jpg'>
    <figcaption>III</figcaption>
  </figure>
</section>

標籤：javascript html css 循环

上一篇：滾動到HTML/CSS中的部分

下一篇：CSS影片僅顯示在第一張幻燈片影像上