> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트 캐러셀 차트를 만드는 방법

자바스크립트 캐러셀 차트를 만드는 방법

王林
풀어 주다: 2023-05-09 09:22:06
원래의
1221명이 탐색했습니다.

JavaScript 캐러셀을 만드는 방법은 무엇인가요?

웹 프런트 엔드 개발이 발전하면서 캐러셀 이미지는 대부분의 웹 사이트와 애플리케이션의 공통 구성 요소 중 하나가 되었습니다. 하지만 프론트엔드 개발을 처음 접하는 많은 친구들이 JavaScript 캐러셀 차트를 만드는 방법에 대해 질문할 것이라고 믿습니다.

이 글에서는 JavaScript를 사용하여 캐러셀 차트를 만드는 방법을 소개하고, 캐러셀 차트를 구현하기 위한 기본 원리와 공통 기술을 점차적으로 이해하는 데 도움이 될 것입니다.

1. 캐러셀 이미지의 기본 원리

캐러셀 이미지는 이름에서 알 수 있듯이 반복 재생이 가능한 이미지 그룹으로, JavaScript를 통해 자동 반복 또는 수동 전환을 구현하여 사용자가 여러 이미지나 콘텐츠를 탐색할 수 있습니다. .

캐러셀 차트의 기본 원리는 HTML 구조와 JavaScript 로직의 두 부분으로 나뉩니다.

HTML 구조:

HTML 구조는 캐러셀 차트의 기본 구조입니다. 그 구조는 대략 다음과 같습니다.

1

2

3

4

5

6

7

8

9

<div class="carousel">

  <ul class="carousel-list">

    <li class="carousel-item"><img src="image1.jpg" alt="image1"></li>

    <li class="carousel-item"><img src="image2.jpg" alt="image2"></li>

    <li class="carousel-item"><img src="image3.jpg" alt="image3"></li>

    <li class="carousel-item"><img src="image4.jpg" alt="image4"></li>

    <li class="carousel-item"><img src="image5.jpg" alt="image5"></li>

  </ul>

</div>

로그인 후 복사

그 중 .carousel은 캐러셀 차트의 컨테이너이고, 는 <code>입니다. >.carousel-list< /code>는 이미지 목록 컨테이너이고 <code>.carousel-item은 각 개별 이미지에 대한 컨테이너입니다. .carousel 是轮播图的容器,.carousel-list 是图片列表容器,.carousel-item 是每个单独图片的容器。

JavaScript逻辑:

JavaScript逻辑实现轮播图的核心,通常采用以下方式:

1、 获取轮播图页面元素,用 JavaScript 代码选中 HTML 中的 .carousel 元素。

1

var carousel = document.querySelector('.carousel');

로그인 후 복사

2、 获取图片列表容器和单独图片容器,

1

2

var list = carousel.querySelector('ul');

var items = carousel.querySelectorAll('.carousel-item');

로그인 후 복사

3、 获取轮播图图片的宽度,

1

var itemWidth = items[0].offsetWidth;

로그인 후 복사

4、配置切换间隔时间和定时器,

1

2

var delay = 3000;

var interval;

로그인 후 복사

5、配置自动播放和手动切换,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function startCarousel() {

    interval = setInterval(function(){

        var left = parseInt(list.style.left) + itemWidth;

        if(left <= itemWidth - list.offsetWidth) {

            list.style.left = "0px";

        } else {

            list.style.left = left + 'px';

        }

    }, delay);

}

 

function stopCarousel() {

    clearInterval(interval);

}

로그인 후 복사

二、实现简单轮播图

现在,我们已经了解了轮播图的基本原理,并通过代码来实现了轮播图的基本效果。下面,我们将基于这一效果来实现一个简单的轮播图。

HTML结构:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Simple Carousel</title> 

    <link rel="stylesheet" href="style.css" type="text/css">

  </head>

  <body>

    <div class="carousel">

      <ul class="carousel-list">

        <li class="carousel-item"><img src="img/1.jpg" alt="1"></li>

        <li class="carousel-item"><img src="img/2.jpg" alt="2"></li>

        <li class="carousel-item"><img src="img/3.jpg" alt="3"></li>

        <li class="carousel-item"><img src="img/4.jpg" alt="4"></li>

      </ul>

    </div>

    <script src="script.js"></script>

  </body>

</html>

로그인 후 복사

JavaScript代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

var carousel = document.querySelector('.carousel');

var list = carousel.querySelector('ul');

var items = carousel.querySelectorAll('.carousel-item');

var itemWidth = items[0].offsetWidth;

var delay = 3000;

var interval;

 

// 自动播放

function startCarousel() {

    interval = setInterval(function(){

        var left = parseInt(list.style.left) + itemWidth;

        if(left <= itemWidth - list.offsetWidth) {

            list.style.left = "0px";

        } else {

            list.style.left = left + 'px';

        }

    }, delay);

}

 

// 手动切换

function stopCarousel() {

    clearInterval(interval);

}

 

// 启动轮播

startCarousel();

로그인 후 복사

CSS代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.carousel {

  position: relative;

  overflow: hidden;

  width: 400px;           /* 轮播图容器的宽度 */

  height: 300px;          /* 轮播图容器的高度 */

}

.carousel-list {

  list-style: none;

  padding: 0;

  margin: 0;

  position: absolute;

  width: ${(items.length * 100)}%;

}

.carousel-item {

  float: left;

  width: calc(100% / ${(items.length)});

}

.carousel-item img {

  display: block;

  width: 100%;

  height: auto;

}

로그인 후 복사

三、实现多种效果的轮播图

通过上面的例子,我们已经学会了如何制作一个简单的轮播图。但是,通常轮播图不仅仅只有以上的效果,我们还可以通过 JavaScript 实现更多实用的轮播图效果。

1、缓动效果

缓动效果就是让每张图片切换时速度由快到慢的效果。通过使用JavaScript通常我们可以像这样写:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function startCarousel() {

    interval = setInterval(function(){

        var left = parseInt(list.style.left) + itemWidth;

        var startTime = Date.now();

        var easing = function(t, b, c, d) {

            return c * ((t = t / d - 1) * t * t + 1) + b;

        };

        var animate = function() {

            var time = Date.now() - startTime;

            var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);

            if(time <= delay) {

                list.style.left = easingLeft + 'px';

                requestAnimationFrame(animate);

            } else {

                list.style.left = -itemWidth + 'px';

                list.appendChild(items[0]);

            }

        };

        requestAnimationFrame(animate);

    }, delay);

}

로그인 후 복사

2、响应式布局

响应Web设计是现代前端设计的常识,为了使轮播图能够支持不同的屏幕尺寸,更好地适应Web布局,我们需要做些额外的调整和优化。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

/* 以vw为基准 */

.carousel {

  position: relative;

  overflow: hidden;

  width: 80vw;         /* 轮播图容器的宽度 */

  height: calc(40vw);  /* 轮播图容器的高度 */

}

 

/* 以persent为基准 */

.carousel-list {

  list-style: none;

  padding: 0;

  margin: 0;

  position: absolute;

  width: ${(items.length * 100)}%;

  top: 0;

  left: 0;

  transition: left .3s;

}

 

.carousel-item {

  float: left;

  width: calc(100% / ${(items.length)});

  height: 100%;

}

 

/* 调整图片大小 */

.carousel-item img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

로그인 후 복사

其中,vw

JavaScript 로직:

JavaScript 로직은 일반적으로 다음과 같은 방식으로 캐러셀 차트의 핵심을 구현합니다.

1 캐러셀 차트 페이지 요소를 가져오고 JavaScript 코드를 사용하여 HTML에서 .carousel 요소를 선택합니다.

rrreee

2. 이미지 목록 컨테이너와 개별 이미지 컨테이너를 가져옵니다. 🎜rrreee🎜3. 캐러셀 이미지의 너비를 가져옵니다. 🎜rrreee🎜4. 전환 간격과 타이머를 구성합니다. 🎜rrreee🎜5. 재생 스위치, 🎜rrreee🎜 2. 간단한 캐러셀 차트 구현🎜🎜이제 캐러셀 차트의 기본 원리를 이해하고 캐러셀 차트의 기본 효과를 코드를 통해 구현했습니다. 아래에서는 이 효과를 기반으로 간단한 캐러셀 차트를 구현해 보겠습니다. 🎜🎜HTML 구조: 🎜rrreee🎜JavaScript 코드: 🎜rrreee🎜CSS 코드: 🎜rrreee🎜 3. 다양한 효과를 얻을 수 있는 캐러셀 차트🎜🎜위의 예를 통해 간단한 캐러셀 차트를 만드는 방법을 배웠습니다. 그러나 일반적으로 캐러셀 이미지는 위의 효과를 가질 뿐만 아니라 JavaScript를 통해 보다 실용적인 캐러셀 이미지 효과를 얻을 수도 있습니다. 🎜🎜1. 이징 효과🎜🎜 이징 효과는 각 사진의 속도를 빠르게에서 느리게 변경하는 효과입니다. JavaScript를 사용하면 일반적으로 다음과 같이 작성할 수 있습니다. 🎜rrreee🎜2. 반응형 레이아웃 🎜🎜회전형 차트가 다양한 화면 크기를 지원하고 웹에 더 잘 적응할 수 있도록 반응형 웹 디자인은 상식입니다. 레이아웃에 따라 추가적인 조정과 최적화가 필요합니다. 🎜rrreee🎜그 중 vw 유닛은 길이를 뷰포트 너비의 백분율로 지정할 수 있으며, 캐러셀은 화면 크기 변화에 관계없이 반응형 레이아웃을 유지합니다. 🎜🎜4. 요약🎜🎜지금까지 JavaScript를 통해 캐러셀을 만드는 기본 원리와 구현 방법을 살펴보았습니다. 조정과 최적화를 통해 풍부한 스타일과 효과를 갖춘 더 많은 캐러셀 구성요소를 구현할 수 있으므로 웹 콘텐츠 및 서비스에 대한 사용자 요구를 잘 충족할 수 있습니다. 🎜🎜물론, JavaScript로 캐러셀 차트를 만드는 데에는 아직 숙지해야 할 기술적인 어려움과 운영 세부 사항이 많이 있습니다. 모두가 실제 개발에서 이러한 기술을 점차적으로 익히고 프로그래밍 능력을 지속적으로 향상시킬 수 있기를 바랍니다. 🎜

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿