对于每个项目图像悬停幻灯片

Question

我的这段代码工作正常，但我需要能够添加多个“画廊” 目前它仅适用于第一个..

const interactImg = document.querySelector('.interact-img')
const imgContainer = document.querySelector('.img-container')
const interactImgMain = document.querySelector('.interact-main')
const fashion = document.querySelectorAll('h1')
const mask = document.querySelector('.mask')
const path = document.querySelector('.path')

const images = [
  "./img1.png",
  "./img2.png",
  "./img3.png",
  "./img4.png",
  "./img5.png",
  "./img6.png",
  "./img7.png",
  "./img8.png"
];

let currentIndex = 0;

function changeImage() {
  const imgElement = document.querySelector('.img-change');

  setTimeout(() => {
    currentIndex = (currentIndex + 1) % images.length;
    imgElement.src = images[currentIndex];
    imgElement.alt = `Image ${currentIndex + 1}`;
  }, 500);
}

setInterval(changeImage, 200);

window.addEventListener('mousemove', e => {
  const {
    clientX,
    clientY
  } = e
  const x = Math.round(clientX / window.innerWidth * 100)
  const y = Math.round(clientY / window.innerHeight * 100)
  gsap.to(mask, {
    x: `${clientX}`,
    y: `${clientY}`,
    ease: 'sine.out',
    duration: .5
  })
  gsap.to(imgContainer, {
    x: `${clientX}`,
    y: `${clientY}`,
    ease: 'sine.out',
    duration: .5
  })
})
const cursorTL = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .1
  }
})

cursorTL.to(mask, {
  height: '1.5rem',
  width: '1.5rem',
  outline: '5px solid white',
  outlineOffset: '5px',
  duration: .2
})

const sliderTL = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .1
  }
})
sliderTL.to(imgContainer, {
  opacity: 1,
  clipPath: ' polygon(0 0, 100% 0, 100% 100%, 0 100%)',
  duration: .2
})

const fashionTL = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .5
  }
})

fashionTL
  .to(fashion, {
    stagger: .1,
    duration: .5,
    ease: 'power4.inOut',
    transform: 'translateY(0)',
    opacity: 1,

  })
  .to(path, {
    strokeDashoffset: 0,
    fill: 'white',
    duration: 1,
    ease: 'power4.inOut',
    opacity: 1,

  }, '-=.5')

fashionTL.pause()
cursorTL.pause()
sliderTL.pause()

interactImg.addEventListener('mousemove', () => {
  cursorTL.play()
  fashionTL.play()
  sliderTL.play()

})

interactImg.addEventListener('mouseleave', () => {
  cursorTL.reverse()
  fashionTL.reverse()
  sliderTL.reverse()

})

const tl = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .3
  }
})

tl.to(interactImgMain, {
  transform: 'scale(1.2)',
  filter: 'grayscale(.9)'
})

tl.pause()

interactImgMain.addEventListener('mouseenter', () => {
  tl.play()
  document.body.style.backgroundColor = 'black'
  document.body.style.transition = 'all 1s ease-in-out'
})

interactImgMain.addEventListener('mouseleave', () => {
  tl.reverse()
  document.body.style.backgroundColor = 'white'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="mask">
</div>

<div class="img-container">
  <img class='img-change' src="./img1.png" alt="">
</div>

<div class="interact-img">
  <div class="fashion-container">
    <h1 class="FA">FA</h1>
    <h1 class="SH">SH</h1>
    <h1 class="ION">ION</h1>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path
        class='path'
        d="M3.41 2H16V0H1a1 1 0 0 0-1 1v16h2V3.41l28.29 28.3 1.41-1.41z"
        data-name="7-Arrow Up" />
    </svg>
  </div>
  <img class='interact-main' src="./img7.png" alt="">
</div>

这里是新手..

如何更改此代码以便能够用于更多项目？我在某处读到我需要将“.forEach((function(e)”与“document.querySelectorAll”一起使用，但作为新手，我不知道如何正确解决它。已经花了很多时间，但仍处于开始阶段。

如有任何帮助，我们将不胜感激。

简而言之，这就是我想要实现的目标：

<div class="interact-img first-item">
        <div class="fashion-container">
            <h1 class="FA">First</h1>
            <h1 class="SH">SH</h1>
            <h1 class="ION">ION</h1>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                <path class='path' d="M3.41 2H16V0H1a1 1 0 0 0-1 1v16h2V3.41l28.29 28.3 1.41-1.41z"
                    data-name="7-Arrow Up" />
            </svg>
        </div>
        <img class='interact-main' src="./img7.png" data-hover-images="./img7.png, ./img6.png, ./img5.png, ./img4.png" 1alt="">

    </div>
    
    <div class="interact-img second-item">
        <div class="fashion-container">
            <h1 class="FA">Second</h1>
            <h1 class="SH">SH</h1>
            <h1 class="ION">ION</h1>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                <path class='path' d="M3.41 2H16V0H1a1 1 0 0 0-1 1v16h2V3.41l28.29 28.3 1.41-1.41z"
                    data-name="7-Arrow Up" />
            </svg>
        </div>
        <img class='interact-main' src="./img1.png" data-hover-images="./img2.png, ./img3.png, ./img4.png" 1alt="">

    </div>

Answer 1

我评论了

images

数组的初始化，以便在页面加载时填充该数组，从 DOM 获取图片 url

const images = [
/*
  "./img1.png",
  "./img2.png",
  "./img3.png",
  "./img4.png",
  "./img5.png",
  "./img6.png",
  "./img7.png",
  "./img8.png"
*/
];

//when the HTML document has been completely parsed
document.addEventListener('DOMContentLoaded', ()=>{
    document
        //finds all the img elements in the target container
        .querySelectorAll('.img-container .img-change')
        //for each one
        .forEach(img => {
            //pushes its src in the images array
            images.push(img.src);
        })  
})

这是工作演示..我使用了你自己的代码，但我解决了几个问题，我也在你自己的问题中添加了这些问题（我觉得可以随意这样做，因为这不是问题的重点，而且只是拼写错误你这边）：

const interactImg = document.querySelector('.interact-img')
const imgContainer = document.querySelector('.img-container')
const interactImgMain = document.querySelector('.interact-main')
const fashion = document.querySelectorAll('h1')
const mask = document.querySelector('.mask')
const path = document.querySelector('.path')

const images = [
/*
  "./img1.png",
  "./img2.png",
  "./img3.png",
  "./img4.png",
  "./img5.png",
  "./img6.png",
  "./img7.png",
  "./img8.png"
*/
];

document.addEventListener('DOMContentLoaded', ()=>{
    document
        .querySelectorAll('.img-container .img-change')
        .forEach(img => {
            images.push(img.src);
        })  
})

let currentIndex = 0;

function changeImage() {
  const imgElement = document.querySelector('.img-change');

  setTimeout(() => {
    currentIndex = (currentIndex + 1) % images.length;
    imgElement.src = images[currentIndex];
    imgElement.alt = `Image ${currentIndex + 1}`;
  }, 500);
}

setInterval(changeImage, 200);

window.addEventListener('mousemove', e => {
  const {
    clientX,
    clientY
  } = e
  const x = Math.round(clientX / window.innerWidth * 100)
  const y = Math.round(clientY / window.innerHeight * 100)
  gsap.to(mask, {
    x: `${clientX}`,
    y: `${clientY}`,
    ease: 'sine.out',
    duration: .5
  })
  gsap.to(imgContainer, {
    x: `${clientX}`,
    y: `${clientY}`,
    ease: 'sine.out',
    duration: .5
  })
})

const cursorTL = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .1
  }
})

cursorTL.to(mask, {
  height: '1.5rem',
  width: '1.5rem',
  outline: '5px solid white',
  outlineOffset: '5px',
  duration: .2
})

const sliderTL = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .1
  }
})

sliderTL.to(imgContainer, {
  opacity: 1,
  clipPath: ' polygon(0 0, 100% 0, 100% 100%, 0 100%)',
  duration: .2
})

const fashionTL = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .5
  }
})

fashionTL
  .to(fashion, {
    stagger: .1,
    duration: .5,
    ease: 'power4.inOut',
    transform: 'translateY(0)',
    opacity: 1,

  })
  .to(path, {
    strokeDashoffset: 0,
    fill: 'white',
    duration: 1,
    ease: 'power4.inOut',
    opacity: 1,

  }, '-=.5')

fashionTL.pause()
cursorTL.pause()
sliderTL.pause()

interactImg.addEventListener('mousemove', () => {
  cursorTL.play()
  fashionTL.play()
  sliderTL.play()
})

interactImg.addEventListener('mouseleave', () => {
  cursorTL.reverse()
  fashionTL.reverse()
  sliderTL.reverse()
})

const tl = gsap.timeline({
  default: {
    ease: 'power4.out',
    duration: .3
  }
})

tl.to(interactImgMain, {
  transform: 'scale(1.2)',
  filter: 'grayscale(.9)'
})

tl.pause()

interactImgMain.addEventListener('mouseenter', () => {
  tl.play()
  document.body.style.backgroundColor = 'black'
  document.body.style.transition = 'all 1s ease-in-out'
})

interactImgMain.addEventListener('mouseleave', () => {
  tl.reverse()
  document.body.style.backgroundColor = 'white'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="mask">
</div>

<div class="img-container">
  <!-- here are the pictures that will be dynamically used in the js code -->
  <img class='img-change' src="./img1.png" alt="">
  <img class='img-change' src="./img2.png" alt="">
  <img class='img-change' src="./img3.png" alt="">
  <img class='img-change' src="./img4.png" alt="">
</div>

<div class="interact-img">
  <div class="fashion-container">
    <h1 class="FA">FA</h1>
    <h1 class="SH">SH</h1>
    <h1 class="ION">ION</h1>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path
        class='path'
        d="M3.41 2H16V0H1a1 1 0 0 0-1 1v16h2V3.41l28.29 28.3 1.41-1.41z"
        data-name="7-Arrow Up" />
    </svg>
  </div>
  <img class='interact-main' src="./img7.png" alt="">
</div>