회전 목마가 현재의 회전 목마 해당 그림과 회전 목마의 정보 내용을 표시 할 때 최근이 회전 목마지도 페이지,하지만 위치로 원하는 페이지와 회전 목마 그림의 연결, 그리고지도 회전 목마의 다른 부분을 만든 내용지도 확대하기
느낌이 신이 저를 수정하시기 바랍니다 문제가있는 경우 나, 프로세스가 비교적 거친 실감이의 다음 기록을 참조하십시오
첫째, 사용 CSS3의 애니메이션
@keyframes 스위치 { 0 % 16.6 % { 변환 : translateX (0) ; } 16.6 %, 33.3 % { 변환 : translateX (-16.6 %)을 ; } 50 %, 66.6 % { 변환 : translateX (-33.3 %)을 ; } 83 %, 100 % { 변환 : translateX (-50 %)을 ; } }
그러나 CSS3 애니메이션 실현의 측면에서 상대적으로 간단하지만, 함수는 먼저, 두 번째 부분은 연결도 달성 할 수있는 기회입니다 운영 요소를 줄이기 위해 시간을 찾을 수없는 회전 목마 그림을 확대, 그래서 CSS3이 최종 달성 사용해야합니다, 상대적으로 작은 나는 것을 포기
두, JQuery와 애니메이션을 달성하기 위해
우리가 다음 애니메이션이 완료되면 재귀 애니메이션을 사용하기 시작 달성하기 위해 애니메이션 JQuery와의 사용과 더 잘 알고 그래서 달성하기 위해 JQuery와 애니메이션을 사용하지만 너무 상태, 뒤의 체인을 통해 실현 될하지만 유연성을 변경하지 않습니다 회전 목마 그림 변경 횟수가 너무 많은 코드를 수정하는 경우 작은 시간
기능 animateloop () { $ ( '#lightslider') 애니메이션 ({marginLeft :. "0"}, 0, '선형', 기능 () { // 第二个放大 . $ ( '#의 lightslider 리') EQ ( 1) .addClass () '활성'. 형제 (). removeClass ( '활성' ) 의 setTimeout (() => { $ ( '#detailcontent의 P'). slideUp (1000 함수 () { $ ( '#detailcontent 피 ') .html 중에서 ('第三机房' ) $ ( '#detailcontent의 P '). slideDown (500, 함수 () { }) }) },1500 ); }). 지연 ( 1000) .animate ({marginLeft : l}, 1500 '직선' 함수 () { // 第三个放大 . $ ( '#의 lightslider 리') 당량 (2) .addClass ( '능동 ') .siblings (). removeClass ('활성 ' ) 의 setTimeout (() => { $ ( '#detailcontent의 P '). slideUp (1000 함수 () { $ ( '#detailcontent의 P '). HTML ('第四机房' ) $ ( '#detailcontent 피 ') slideDown (400. 함수 () { }) }) }, 1500 ); // 콘솔.로그 (1) }) 지연 (1000) .animate ({marginLeft : L1} 1500 '직선'. 함수 () { // 第四个放大 . $ ( '#의 lightslider 리') 당량 (3) .addClass ( '능동 ') .siblings (). removeClass ('활성 ' ) 의 setTimeout (() => { $ ( '#detailcontent의 P '). slideUp (1000 함수 () { $ ( '#detailcontent의 P '). HTML ('第五机房' ) $ ( '#detailcontent의 P ') slideDown (400. 함수 () { }) }) }, 1,500 ); // CONSOLE.LOG (2) }) 지연 (1000) .animate ({marginLeft : (L2)}, 1500 '직선'. 함수 () { // 第五个放大 . $ ( '#의 lightslider 리') 당량 (4) .addClass ( '능동 ') .siblings (). removeClass ('활성 ' ) 의 setTimeout (() => { $ ( '#detailcontent의 P '). slideUp (1000 함수 () { $ ( '#detailcontent의 P '). HTML ('第六机房' ) $ ( '#detailcontent의 P ') slideDown (400. 함수 () { }) }) }, 1,500 ); // CONSOLE.LOG (3) }) 지연 (1000) .animate ({marginLeft : L3} 1500 '직선'. 함수 () { // 第六个放大 . $ ( '#의 lightslider 리') 당량 (5) .addClass ( '능동 ') .siblings (). removeClass ('활성 ' ) 의 setTimeout (() => { $ ( '#detailcontent의 P '). slideUp (1000 함수 () { $ ( '#detailcontent의 P '). HTML ('第七机房' ) $ ( '#detailcontent의 P ') slideDown (400. 함수 () { }) }) }, 1,500 ); // CONSOLE.LOG (4) }) 지연 (1000) .animate ({marginLeft : L4} 1500 '직선'. 함수 () { // 第七个放大 . $ ( '#의 lightslider 리') 당량 (6) .addClass ( '능동 ') .siblings (). removeClass ('활성 ' ) 의 setTimeout (() => { $ ( '#detailcontent의 P '). slideUp (1000 함수 () { $ ( '#detailcontent의 P '). HTML ('第一机房' ) $ ( '#detailcontent의 P ') slideDown (400. 함수 () { }) }) }, 1,500 ); // CONSOLE.LOG (5) }) 지연 (1000) .animate ({marginLeft : L5} 1500 '직선'. 함수 () { // 第一个放大 . $ ( '#의 lightslider 리') 당량 (7) .addClass ( '능동 ') .siblings (). removeClass ('활성 ' ) 의 setTimeout (() => { $ ( '#detailcontent의 P '). slideUp (1000 함수 () { $ ( '#detailcontent의 P '). HTML ('第二机房' ) $ ( '#detailcontent 피 ') slideDown (400. 함수 () { }) }) }, 1500 ); // 콘솔. (6) 기록 ) (animateloop을(6) 기록 (}). 지연2000 ) }
셋째, 이러한 유연성의 기능을 확장하기 위해 최적화 된 최고 방법과 함께 인덱스를 사용
VAR의 카운트 = 0 ; var에 배너 = $ ( '#의 leftarticle의 .banner') EQ (0. ) VAR leftliwidth = -banner.width () / 3 ; // 轮播图中的리的个数 VAR leftlicount = $ ( '#의 leftarticle의 .banner 리' ) .length $ ( '#lightslider 리'). 당량 .addClass ( '활성'). 형제 (1 + 카운트) () .removeClass ( '활성' ) $ ( '#detailcontent의 P'). HTML은 ( '第'+ (2 + 카운트) + '机房' ) 의 setTimeout (() =>을 { $ ( '#detailcontent의 P'). slideUp (500, 함수 () { $ ( '#detailcontent의 P'). slideDown (500 }) }) }, 1500 ); 하여 setInterval ( 함수 () { // 을 console.log (수) 경우 (카운트 == leftlicount - 3 ) { $ ( . '왼쪽' '#leftarticle .banner UL') CSS는 (0 ) 계산 = 0 } 수 ++ $ ( . '#leftarticle .banner UL') 애니메이션 ({좌측 : leftliwidth 카운트} * 1000 '직선' 함수 () { $ ( . '#lightslider 리') 당량 ( '(+ 1)를 계산 .addClass 활성 '). 형제 자매 (). removeClass ('활성 ' ) $ ( '#detailcontent 피 '). html로 ('第' => { $ ( '#detailcontent의 P') slideUp (500. 함수 () { $ ( '#detailcontent의 P') slideDown (500. 함수 () { }) }) }, 1,500 ); }) }, 2000)
내가 이었기 때문에 상황이 잘못 표시되지 않도록 세 리튬의 표시는 그래서, 세 가지 가짜 리를 넣어. 연계 인덱스를 통해 일부의 시작 위치로 직접 배출하는 경우, 애니메이션 인덱스로 최종 판정으로 이동하고, 렌더링 여부 리 애니메이션 콘텐츠 클래스 이름 및 전환을 추가함으로써 달성된다
HTTPS : //www.cnblogs.com/wyongz/p/11093233.html 재현