기본 JS는 사업부의 간단한 회전 목마보기를 달성

전 지방 JS는 회전 목마지도를 얻을 수 있습니다.

자동으로 사진을 회전 페이지를 열고는 이전 이전 / 다음 사진으로 전환 해당 사진에 1-5 스위치를 클릭하여 버튼을 클릭합니다.

코드 링크 : https://github.com/sandraryan/practise/blob/master/js/%E8%BD%AE%E6%92%AD%E5%9B%BE.html

아마 이미지를 추가하지 않고 긴 방법은 DIV를 달성 할 수있다

 

CSS 코드 :

.wrap {
         / * 展示区域样式* / 
        폭 : 500 픽셀 ; 높이 : 400 픽셀 ; 
        상자 그림자 : 0 0 10px RGBA (0, 0, 0, 0.5) ; 
        디스플레이 : 플렉스 ; 
        오버 플로우 : 숨겨진 ; 
        위치 : 상대 ; 
    } 
    .swipe { 
        폭 : 2500px ; 
        디스플레이 : 플렉스 ; 
        위치 : 절대 ;
        좌측 : 0 ]
         / * 전이 효과를 사진을 변경은, 타이머 시간이, 그렇지 않으면 충돌 예정 기간을 초과 할 수 없다 * / 
        전환 : .8s를 ] 
    } / * 방송 라운드 부 요소 스타일 * / 
    .box { 
        폭 : 500 픽셀 , 높이 : 400 픽셀 , 
        배경색 : (228, 226, 226) RGB ] 
        색상 : #fff ; 
        폰트 크기 : 200 픽셀 ; 
    } 
    버튼 { 
        폭 : 100 픽셀
    ; 높이 : 40px ; 
        여백 : 10px 5px ; 
        경계 반경 : 8px ; 
        배경색 : RGB (202, 202, 202) ; 
        폰트 크기 : 22 픽셀 ; 
        색상 : 흰색 ; 
    }

페이지 구조 :

<! - 一些按钮-> 
    < 버튼 클래스 = "이전" > 이전 </ 버튼 > 
    < 버튼 클래스 = "다음" > 다음 </ 버튼 > 
    < BR > 
    < 버튼 클래스 = "BTN" > 하나 </ 버튼 > 
    < 버튼 클래스 = "BTN" > 두 </ 버튼 > 
    < 버튼 클래스 = "BTN" >세 </ 버튼 > 
    <버튼 클래스 = "BTN" > 네 </ 버튼 > 
    < 버튼 클래스 = "BTN" > 다섯 </ 버튼 > 
    <! - 표시 영역 -> 
    < DIV 클래스 = "포장" > 
        <! - 방송 휠 부모 요소 -> 
        < DIV 클래스 = "와이프" > 
            <! - 서브 요소 목록 둘레 방송 -> 
            < DIV 클래스 = "박스" > BOX1 </ DIV > 
            <DIV의 클래스 = "상자" >BOX2 </ DIV > 
            < DIV 클래스 = "상자" > box3 </ DIV > 
            < DIV 클래스 = "상자" > box4 </ DIV > 
            < DIV 클래스 = "상자" > box5 </ DIV > 
        </ DIV > 
    </ DIV >

JS 코드 :

<script>
     // 얻기 소자 
    VAR PREV = document.querySelector ( "PREV." );
     VAR document.querySelector = 다음 ( "다음." );
     VAR btns = document.querySelectorAll ( "BTN." );
     var에 와이프 문헌 = (. "와이프".querySelector ); 

    // 자동 실행 
    // 래퍼 함수 
    // 판정 지수는 좌측의 값의 함수로서 변화 
    함수 nextFn () { 
        인덱스 ? = 인덱스 == 0.4 : ++ 인덱스;  
         //는 좌측 요소를 타겟팅 취할 효과 
        swipe.style.left -index * = 500 + "PX" ; 
    } 

    // 함수 타이머 
    기능자동 실행은 () { 
        autoTinmer가 하여 setInterval (= 함수 () {
         // 왼쪽 초기 값은 0이고, 좌측에는 화상의 폭에 의해 각 픽처의 수이다 
        // 다섯 이미지는 가장 왼쪽의 네 가동도 남아있다. , ++ 인덱스, 그렇지 않으면 4 0 동일한 인덱스 복원 
       , nextFn () 
    }, 2000 ); 
    } 
    // 페이지가 자동으로 연극을 새로 고쳐집니다, 
    자동 실행을 ();
     //이 현재 사진 쇼의 순서 선언 
    var에 인덱스 = -1 ;
     var에 autoTinmer; 
   
    // 클릭 한 다음 이전 
    next.onclick = 함수 () {
         // 자동으로 다음 완료 첫 공연 재생, 정지 
        사항 clearInterval (autoTinmer);
         // 바로 다음 다음 쇼를 클릭
        nextFn ();
         // 자동 재생 계속 
        ; 자동 실행 () 
    } 
    prev.onclick = 함수 () { 
        위해 clearInterval (autoTinmer를) 
        // 디스플레이 바로 이전에 클릭 
        인덱스 = 인덱스 == 0 4 - 인덱스; 
        와이프 .style.left = -index * 500 + "PX" ; 
        자동 실행은 (); 
    } 
    // 시퀀스에 대응하는 버튼을 클릭 
    // 1-5 버튼을 통해 루프를 
    위한 ( VAR의 J = 0; J <btns.length, J ++ ) {
         // 각 BTN 바인드 클릭 이벤트 
        btns [J] .onclick = 함수 () {
             //자동 재생 타이머가 정지 
            하며 사항 clearInterval (autoTinmer가)
             // 현재 버튼을 획득 btns의 순서에 가져 
            //이 는 의사 배열이 아니라 배열이 방법을 사용할 수없는 배열이기 때문에, 같이 IndexOf 방법 여기에 사용할 수 없습니다 
            // getAttribute를 사용자 정의 속성 값의 HTML의 라벨로서 취득 
            VAR의 I = 이 본 .getAttribute ( "데이터 I" )
             // CONSOLE.LOG (I) 
            // 왼쪽으로 스 와이프의 값에 따라 설정이 순서 
            swipe.style.left = - * (500) + I "PX" ;
             // 타이머 자동 재생 복원 
            자동 실행 (); 
        } 
    }
     </ script>

말 ● (∀의 ●)