Coding/HTML & CSS

[Html & CSS] 사진 클릭하면서 넘기는 효과 주는 방법 !!

포스트it 2023. 7. 22. 09:00
728x90
반응형

 

[Html & CSS] 사진 클릭하면서 넘기는 효과 주는 방법 !!

javascript로 사진 클릭하면 변경되는 효과를 줘봤습니다 ㅎ

 

예제코드
<!DOCTYPE html>
<html>
<head>
  <title>사진 클릭 변경</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .gallery {
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    img {
      max-width: 100%;
      max-height: 300px;
      cursor: pointer;
      transition: transform 0.3s;
    }

    img:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <h1>사진 클릭 변경</h1>
  <div class="gallery" id="gallery">
    <img src="https://www.hidomin.com/news/photo/202105/453232_224470_4025.jpg" onclick="showNextImage()" />
    <img src="https://cdn.autotribune.co.kr/news/photo/202304/8017_43246_1529.jpg" onclick="showNextImage()" />
    <img src="https://file.mk.co.kr/meet/neds/2023/02/image_readtop_2023_117777_16759917015347929.jpg" onclick="showNextImage()" />
  </div>

  <script>
    const images = document.querySelectorAll('.gallery img');
    let currentIndex = 0;

    function showNextImage() {
      images[currentIndex].style.display = 'none';
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].style.display = 'block';
    }

    // 처음에 첫 번째 이미지만 보이도록 설정
    for (let i = 1; i < images.length; i++) {
      images[i].style.display = 'none';
    }
  </script>
</body>
</html>

결과값

728x90
반응형