자바스크립트 캐러셀 이미지 js 작성 방법-프런트엔드 Q&A-php.cn

자바스크립트 캐러셀 이미지 js 작성 방법

PHPz

풀어 주다： 2023-04-24 14:42:14

원래의

901명이 탐색했습니다.

JavaScript 회전식 차트 구현에서는 기본 JavaScript 코드를 사용하거나 성숙한 타사 라이브러리(예: jQuery 등)를 참조할 수 있습니다.

자바스크립트 캐러셀 차트 구현 방법을 소개하기 위해 네이티브 자바스크립트 코드를 예로 들어보겠습니다.

1단계: HTML 구조

먼저 이미지 컨테이너, 왼쪽 및 오른쪽 화살표, 탐색 버튼 등을 포함하여 HTML에서 캐러셀의 구조를 정의해야 합니다. 예:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
  <div class="slider-dots">
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

로그인 후 복사

여기서 slider-container是轮播图的容器，slider-wrapper是图片容器，slider-prev和slider-next是左右箭头，slider-dots和slider-dot는 탐색 버튼입니다.

2단계: CSS 스타일

다음으로 컨테이너의 너비, 높이, 위치 등, 이미지의 레이아웃과 크기, 탐색 버튼의 스타일을 포함하여 캐러셀 이미지의 스타일을 설정해야 합니다. , 등.

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  width: 2400px;
  height: 400px;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  float: left;
  width: 800px;
  height: 400px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
  transform: rotate(180deg);
}

.slider-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  display: inline-block;
  margin: 0 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #f90;
}

로그인 후 복사

위는 몇 가지 간단한 예시 스타일입니다. 물론 특정 스타일은 필요에 따라 조정할 수 있습니다.

3단계: JavaScript 코드

이제 캐러셀 효과를 얻기 위한 JavaScript 코드 작성을 시작하세요. 먼저 다음과 같이 각 요소의 참조를 가져와야 합니다.

var container = document.querySelector('.slider-container');
var wrapper = document.querySelector('.slider-wrapper');
var prev = document.querySelector('.slider-prev');
var next = document.querySelector('.slider-next');
var dots = document.querySelectorAll('.slider-dot');

로그인 후 복사

그런 다음 다음과 같은 일부 매개변수와 변수를 설정해야 합니다.

var index = 0;  // 当前图片的索引
var interval = 3000;  // 切换时间间隔（3秒）
var timer = null;  // 定时器

로그인 후 복사

다음으로 캐러셀의 기본 기능을 구현하는 몇 가지 함수를 작성해야 합니다. :

이미지 전환 :

function changeImage() {
  wrapper.style.transform = 'translateX(-' + index * 800 + 'px)';
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove(&#39;active&#39;);
  }
  dots[index].classList.add(&#39;active&#39;);
}

로그인 후 복사

자동 전환:

function autoPlay() {
  timer = setInterval(function() {
    index++;
    if (index >= dots.length) {
      index = 0;
    }
    changeImage();
  }, interval);
}

로그인 후 복사

자동 전환 중지:

function stopAutoPlay() {
  clearInterval(timer);
}

로그인 후 복사

탐색 버튼의 클릭 이벤트 처리:

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener(&#39;click&#39;, function() {
    index = this.getAttribute(&#39;data-index&#39;);
    changeImage();
    stopAutoPlay();
  });
}

로그인 후 복사

왼쪽 및 오른쪽 화살표의 클릭 이벤트 처리:

prev.addEventListener(&#39;click&#39;, function() {
  index--;
  if (index < 0) {
    index = dots.length - 1;
  }
  changeImage();
  stopAutoPlay();
});

next.addEventListener(&#39;click&#39;, function() {
  index++;
  if (index >= dots.length) {
    index = 0;
  }
  changeImage();
  stopAutoPlay();
});

로그인 후 복사

마지막으로 페이지가 로드된 후 자동 전환을 시작합니다.

window.addEventListener('load', function() {
  autoPlay();
});

로그인 후 복사

요약하면 다음은 간단한 JavaScript 캐러셀 차트를 구현하는 단계입니다. 물론 필요에 따라 페이드인 및 페이드아웃 효과, 레이지 로딩, 반응형 레이아웃 등 더 많은 기능을 확장할 수 있습니다.

위 내용은 자바스크립트 캐러셀 이미지 js 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!