javascript - js에서 엔드투엔드 캐러셀의 원리는 무엇입니까?

Question

일반 캐러셀은 이미지의 상위 컨테이너 왼쪽을 변경하여 구현합니다. 그런데 끝에서 끝까지 연결되는 캐러셀의 원리는 어떨까요?

JS를 어떻게 제어하나요?

Answer 1

내 아이디어에 대해 이야기해 보겠습니다. 도움이 되기를 바랍니다. 저는 제이쿼리를 사용합니다.

• 1


• 2


• 3

< li><img>4</li>
.....
<ul>
모든 li 태그 가져오기 $("li"). 왼쪽 또는 오른쪽 이동 버튼을 클릭하면 ul이 왼쪽과 오른쪽으로 XX픽셀만큼 이동합니다(각 li는 동일한 크기이며 너비는 1li만큼 이동합니다)
첫 번째 $("li").eq[0]을 왼쪽으로 이동하여 ul Last(appendTo)에 배치합니다. 오른쪽으로 이동하면 마지막 li가 맨 앞에 놓입니다(prependTO).
몇 가지 애니메이션 효과 animate()를 추가하여 더 멋지게 만드세요.

Answer 2

끝에서 끝까지 연결해 주죠? 이전에 몇 가지 관련 캐러셀 원리를 본 적이 있는데, 일반적으로 첫 번째는 js로 약간 이동하여 두 번째로 전환됩니다. 그런 다음 마지막 항목이 오면 마지막 항목 다음에 다른 항목을 추가할 수 있습니다. 사진을 마지막 사진에서 첫 번째 사진의 복제본으로 전환하는 것도 약간의 움직임 전환이지만 전환이 완료된 후에는 즉시 실제 첫 번째 사진의 위치로 변경됩니다. left: 0. 이때 다음 단계는 첫 번째 사진에서 두 번째 사진으로 즐겁게 전환하는 것입니다. - - 질문자가 이런 질문을 했는지 궁금합니다.

Answer 3

아이디어를 주세요

캐러셀 구성 요소의 각 그림은 다른 그림과 연속적으로 연결되기보다는 독립적인 개체로 상상할 수 있습니다

사진이 전환될 때마다 사용자는 2개의 사진만 볼 수 있습니다: 현재 사진과 다음 사진은 사용자가 볼 수 없는 한 실제 위치에 관계없이 나머지 사진입니다. , 우리는 이 2개의 그림을 준비하고 해당 변위 애니메이션을 설정하기만 하면 됩니다. 소위 엔드투엔드 연결은 "머리"를 "꼬리" 뒤에 놓고 애니메이션을 적용하기만 하면 됩니다.
이전 사진으로 전환하고 싶은 경우에도 마찬가지입니다. 현재 사진과 이전 사진을 준비하고 변위 애니메이션을 설정하면 됩니다

또한 모바일에서는 GPU 가속을 활성화할 수 있는 변위를 위해

를 사용하는 것이 가장 좋습니다. 그렇지 않으면 애니메이션이 정지됩니다

Answer 4

실제로는 매우 간단합니다. 5개의 원본 사진이 있고 구조는 다음과 같습니다.

으아악

다음으로 바꾸세요:

으아악

첫 번째 사진이 왼쪽으로 슬라이드되면 애니메이션이 끝난 후 다섯 번째 사진으로 왼쪽을 재설정하고 그 반대도 마찬가지입니다!

Answer 5

회전형 차트 나는 src를 동적으로 변경하는 것을 선호합니다

Answer 6

질문하시는 분이 큐와 스택에 대해 알고 계시나요? 그렇다면 캐러셀 차트는 큐이고, 큐에서 제외된 요소는 다시 큐에 들어와서 설명하기 쉬울 것입니다.

Answer 7

동일한 사진 2세트를 사용하여 전환을 통해 이동하고 왼쪽으로 수정하세요.

두 번째 그룹의 첫 번째 사진으로 좌회전하면 바로 전환을 끄고 첫 번째 그룹의 첫 번째 사진으로 좌회전한 후 전환을 켜세요

Answer 8

원리는: 왼쪽으로 이동한다고 가정하고, 이동할 때마다 가장 왼쪽 그림의 p를 오른쪽으로 이동합니다. 즉, 첫 번째 p를 마지막 p로 이동하고 동시에 왼쪽의 값을 수정합니다. 큰 컨테이너를 추가하고 이미지의 너비를 추가합니다.

Answer 9

jquery를 사용한다면 insertAfter와 insertBefore를 사용할 수 있습니다