자바스크립트를 사용하여 이미지 전환 구현-프런트엔드 Q&A-php.cn

자바스크립트를 사용하여 이미지 전환 구현

WBOY

풀어 주다： 2023-05-27 10:55:38

원래의

2149명이 탐색했습니다.

인터넷 애플리케이션이 발전하면서 웹사이트의 아름다움과 상호작용성은 방문자를 유치하는 데 중요한 요소가 되었습니다. 웹디자인에서는 이미지의 활용이 필수적입니다. 페이지에 이미지 전환 효과를 설정하는 것은 사용자의 관심을 끌 수 있는 좋은 방법입니다. 이번 글에서는 자바스크립트를 이용해 간단한 이미지 전환 효과를 구현해보겠습니다.

먼저 HTML 파일을 만들어야 합니다. 파일 상단에 CSS 스타일과 JavaScript 스크립트에 대한 참조를 추가할 수 있습니다. body 태그 내에서 이미지를 래핑할 div 요소를 만듭니다. 아래와 같이

<!DOCTYPE HTML>
<html>
<head>
  <title>图片切换</title>
  <style type="text/css">
    #img {
      width: 600px;
      height: 400px;
      margin: 0 auto;
      position: relative;
    }
    #img img {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    #img img.active {
      opacity: 1;
    }
  </style>
  <script src="img_switch.js"></script>
</head>
<body>
  <div id="img">
    <img src="image1.jpg" class="active" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <img src="image4.jpg" />
  </div>
</body>
</html>

로그인 후 복사

CSS 스타일에서 #img div 요소의 너비와 높이를 설정하고 이미지의 위치를 상대적으로 정의했습니다. 또한 각 이미지의 위치를 절대값으로 설정하여 함께 쌓일 수 있도록 합니다.

여기에서는 opacity 속성을 사용하여 이미지의 투명도를 설정합니다. 활성 클래스는 현재 표시된 이미지를 나타냅니다. 다음 이미지로 전환할 때 현재 표시된 이미지의 불투명도 값을 0으로 설정하고, 다음 이미지의 불투명도 값을 1로 설정합니다. 이로 인해 페이딩 및 신흥 효과가 생성됩니다.

다음으로 JavaScript 스크립트 파일 img_switch.js를 생성하겠습니다. 코드는 다음과 같습니다.

var i = 0; // 初始化计数器
var images = document.querySelectorAll("#img img"); // 获取所有的图片元素
var len = images.length; // 获取图片的总数

function switchImg() {
  // 隐藏当前展示的图片
  images[i].classList.remove("active");
  // 获取下一个图片的索引位置
  i = (i + 1) % len;
  // 显示下一张图片
  images[i].classList.add("active");
}

// 每隔5秒切换一次图片
setInterval(switchImg, 5000);

로그인 후 복사

이 JavaScript 스크립트에서는 먼저 카운터 변수 i를 정의한 다음 모든 이미지 요소를 가져와 변수 이미지에 저장합니다. 또한 총 사진 수를 저장하기 위해 변수 len을 정의합니다.

switchImg 함수에서는 먼저 현재 표시된 사진의 활성 클래스를 제거한 후 다음 사진의 인덱스 위치를 계산하고 활성 클래스를 추가하여 다음 사진을 표시합니다. setInterval 함수를 사용하여 정기적으로 switchImg 함수를 호출하여 자동으로 사진을 전환하는 기능을 구현합니다.

마지막으로 HTML 파일의 JavaScript 스크립트를 참조하여 자동 전환 효과를 실행합니다.

JavaScript를 사용하여 이미지를 전환하는 방법입니다. 더 멋진 효과를 얻기 위해 필요에 따라 스타일과 스크립트를 사용자 정의할 수 있습니다.

위 내용은 자바스크립트를 사용하여 이미지 전환 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!