우리의 첫 번째 단계는 전체 턴테이블 상자와 그것이 필요로 하는 것을 둘러싸는 것이다. (첨부된 사진은 번갈아 가며 그림을 전환할 때 공백이 생기지 않도록 하기 위한 것이다. ) 을 참조하십시오
그런 다음 턴테이블 상자의 크기와 내부 버튼의 스타일을 설정합니다. 스타일을 지정하기 전에 페이지에 대한 CSS 초기화를 수행합니다.
턴테이블 상자 크기 및 턴테이블 그림 크기를 설정합니다. (표시된 내용의 50% 로 브라우저 축소)
위치 지정 설정 그림을 루핑 상자에 고정한 다음 루핑이 처음 표시되는 첫 번째 그림을 루핑 상자에 표시되도록 설정합니다 (인라인 스타일을 설정해야 얻을 수 있음).
네 개의 버튼 (반드시 점일 필요는 없으며 다른 버튼일 수도 있음) 을 설정하여 carousel 에서 그림을 전환합니다.
생각하다
주로 표시 상자와 그림 저장 상자를 통해, 표시 상자의 크기는 순환에 표시할 그림의 크기 또는 그림의 크기입니다. 그러나 수납함은 폭이 충분히 커야 모든 그림이 수평으로 변동할 수 있다. 그런 다음 수납함 넘침 부분을 숨기고 애니메이션을 호출합니다.
애니메이션 상세 정보
@keyframes 는 애니메이션 과정의 모든 화면 또는 영화의 모든 프레임을 의미합니다. 각 화면을 0 부터 100% 까지 설정할 수 있습니다.