자바스크립트에서 이미지를 회전하는 방법-프런트엔드 Q&A-php.cn

자바스크립트에서 이미지를 회전하는 방법

王林

풀어 주다： 2023-05-09 10:11:07

원래의

1359명이 탐색했습니다.

JavaScript는 웹 페이지에 콘텐츠를 동적으로 표시할 수 있는 널리 사용되는 프로그래밍 언어입니다. 웹 디자인에서 이미지 회전은 페이지의 상호 작용성과 매력을 높이는 중요한 부분입니다. 다음은 JavaScript를 사용하여 이미지 회전 효과를 얻는 방법을 소개합니다.

1. HTML 및 CSS 준비

HTML 파일에서는 먼저 이미지 컨테이너를 정의하고 ul 및 li 태그 구조를 사용하여 코드를 작성해야 합니다. ul 태그는 이미지 컨테이너를 나타내고, li 태그는 이미지를 나타냅니다. 아래와 같이:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
</div>

로그인 후 복사

CSS 파일에서 너비, 높이, 위치 및 기타 속성을 포함하여 이미지 컨테이너와 이미지의 스타일을 설정해야 하며, Overflow:hidden 속성을 사용하여 컨테이너 외부의 콘텐츠를 숨겨야 합니다. 지정된 범위 내의 부분만 표시합니다. 아래와 같이:

#slider {
   width: 600px;
   height: 400px;
   position: relative;
   overflow: hidden;
 }
 
 #slider ul {
   position: absolute;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 300%;
 }
 
 #slider ul li {
   float: left;
   width: 33.33%;
   height: 400px;
 }

 #slider ul li img {
   width: 100%;
   height: 100%;
   display: block;
 }

로그인 후 복사

2. JavaScript 구현

JavaScript에서는 이미지 회전 효과를 얻으려면 이미지 컨테이너를 작동해야 합니다. 시간이 지남에 따라 이미지에 애니메이션을 적용하는 타이머를 정의할 수 있습니다. 코드는 다음과 같습니다:

var slider = document.getElementById("slider");
var ul = slider.children[0];
var liWidth = slider.offsetWidth / 3;
var currentIndex = 0;
var timer;

function autoPlay() {
  timer = setInterval(function() {
    currentIndex++;
    if (currentIndex >= 3) {
      currentIndex = 0;
    }
    ul.style.left = -currentIndex * liWidth + "px";
  }, 3000);
}
autoPlay();

로그인 후 복사

코드에서는 먼저 이미지가 포함된 컨테이너 슬라이더와 컨테이너 내의 ul 요소를 가져옵니다. 컨테이너 너비를 li 수로 나누어 각 이미지의 너비를 계산할 수 있습니다. 다음으로 회전 상태를 추적하기 위해 현재 이미지 인덱스를 보유하는 변수 currentIndex를 정의합니다. 마지막으로 setInterval 함수를 사용하여 3초마다 실행되어 currentIndex 값과 ul의 왼쪽 여백을 변경하여 이미지를 자동으로 회전시키는 타이머를 정의합니다. 또한 회전을 중지해야 할 경우에는 ClearInterval 함수를 사용하여 타이머를 중지하세요.

3. 이미지 표시기 추가

이미지 회전 효과에 표시기를 추가하려면 HTML 코드에 표시기 컨테이너를 추가하고 JavaScript를 사용하여 표시기를 동적으로 생성할 수 있습니다. 코드는 다음과 같습니다.

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
  <div id="indicator"></div>
</div>

로그인 후 복사

var indicator = document.getElementById("indicator");

for (var i = 0; i < 3; i++) {
  var div = document.createElement("div");
  div.className = "dot";
  div.setAttribute("index", i);
  div.onclick = function() {
    currentIndex = parseInt(this.getAttribute("index"));
    ul.style.left = -currentIndex * liWidth + "px";
    setActive();
  };
  indicator.appendChild(div);
}

function setActive() {
  var dots = document.getElementsByClassName("dot");
  for (var i = 0; i < dots.length; i++) {
    if (currentIndex == i) {
      dots[i].className = "dot active";
    } else {
      dots[i].className = "dot";
    }
  }
}
setActive();

로그인 후 복사

먼저 표시기 컨테이너 표시기를 가져온 다음 루프 문을 사용하여 인덱스 속성이 있는 여러 div 요소를 동적으로 생성하여 각 그림의 표시기 지점을 나타냅니다. 그런 다음 각 표시 지점에 대해 onclick 이벤트를 추가합니다. 표시 지점을 클릭하면 현재 이미지 인덱스 currentIndex가 변경되고 ul의 왼쪽 여백이 왼쪽으로 설정되고 표시 지점이 활성 상태로 설정됩니다. setActive 함수에서는 모든 표시기 포인트를 반복하고, 현재 선택된 표시기 포인트에 활성 클래스 이름을 추가하고, 선택되지 않은 표시기 포인트와 구별하기 위해 배경색을 깊게 합니다.

4. 요약

이 글에서는 HTML, CSS 및 JavaScript를 사용하여 이미지 회전 효과를 얻는 동시에 표시기를 추가하여 사용자 경험을 향상시키는 방법을 소개합니다. JavaScript 프로그래밍을 심도있게 배우고 싶다면 유사한 웹 애니메이션, 인터랙션 디자인 및 특수 효과를 더 연습하여 기술과 실제 프로젝트 개발 경험을 향상시키는 것이 좋습니다.

위 내용은 자바스크립트에서 이미지를 회전하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!