도 회전 목마 - 기본도 회전 목마 JS를 사용하여

<! DOCTYPE html로>
<HTML LANG = "EN">
<head>
  <메타 캐릭터 = "UTF-8">
  <TITLE>도 회전 - JQuery와 </ TITLE>없는
  <스타일>
    * {
      패딩 : 0;
      여백 : 0;
    }
    .전망{
      폭 : 1000px;
      높이 : 600PX;
      여백 : 0 픽셀 자동;
      여백 - 상단 : 30 픽셀;
      위치 : 상대;
    }
    .view> UL {
      목록 스타일 : 없음;
      폭 : 100 %;
      신장 : 100 %;
      변환 : ROTATE3D (1,1,0,0deg)를;
      변환 - 스타일 : 보존-차원;

    }
    .view> UL> 리 {
      폭 : 20 %;
      왼쪽으로 뜨다;
      신장 : 100 %;
      위치 : 상대;
      변환 - 스타일 : 보존-차원;
      전환 : 변환;
      전이 시간 : 0.5 초;

    }
    .view> UL> 리> {스팬
      디스플레이 : 블록;
      폭 : 100 %;
      신장 : 100 %;
      위치 : 절대;
      왼쪽 : 0;
      최고 : 0;
    }
    .view> UL> 리> 기간 : n 번째의 식 (1) {
      배경 : 홈페이지 ( "IMG / img1.jpg을 ./");
      변환 : translateZ를 (300 픽셀);
    }
    .view> UL> 리> 기간 : n 번째의 식 (2) {
      배경 : 홈페이지 ( "IMG / img2.jpg을 ./");
      변환 : translate Y를 (-300px)는 (1,0,0,90deg)를 ROTATE3D;
    }
    .view> UL> 리> 기간 : n 번째의 식 (3) {
      배경 : 홈페이지 ( "IMG / img3.jpg을 ./");
      변환 : translateZ (-300px)는 (1,0,0,180deg)를 ROTATE3D;
    }
    .view> UL> 리> 기간 : n 번째의 식 (4) {
      배경 : 홈페이지 ( "IMG / img4.jpg을 ./");
      변환 : translate Y를 (300 픽셀) ROTATE3D (1,0,0, -90deg)를;
    }
    .view> UL> 리튬 : n 번째의 식 (1)> {스팬
      배경 위치 : 0,0;
    }
    .view> UL> 리튬 : n 번째의 식 (2)> {스팬
      배경 위치 : -100 % 0;
    }
    .view> UL> 리튬 : n 번째의 식 (3)> {스팬
      배경 위치 : -200 % 0;
    }
    .view> UL> 리튬 : n 번째의 식 (4)> {스팬
      배경 위치 : -300 % 0;
    }
    .view> UL> 리튬 : n 번째의 식 (5)> {스팬
      배경 위치 : -400 % 0;
    }
    .view> .button>은 {
      위치 : 절대;
      상단 : 50 %;
      변환 : translate Y를 (-50 %)을;
      디스플레이 : 블록;
      배경 : RGBA (0,0,0,0.5);
      높이 : 50 픽셀;
      라인 높이 : 50 픽셀;
      텍스트 장식 : 없음;
      텍스트 정렬 : 센터;
      폭 : 50 픽셀;
      색상 : #fff;
      폰트 크기 : 30 픽셀;
    }
    .view> .button> a.pre {
      왼쪽 : 5px;
    }
    .view> .button> a.next {
      오른쪽 : 5px;
    }
  </ 스타일>
</ head>
<body>
<DIV 클래스 = "보기">
  <UL>
    <LI>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
    </ 리>
    <LI>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
    </ 리>
    <LI>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
    </ 리>
    <LI>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
    </ 리>
    <LI>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
      <SPAN> </ SPAN>
    </ 리>
  </ UL>
  <DIV 클래스 = "버튼">
    <a href="javascript:void(0)" class="pre"> << / A>
    <a href="javascript:void(0)" class="next">> </A>
  </ DIV>
</ DIV>
<script>
  창로드 = 함수 () {
    , 카운트 = 0 // 클릭을하자,이 변화에 따라 각도를 클릭
    플래그 = 진정한 // 방지 여러 번의 클릭하자
    document.querySelector ( '. 다음').의 onclick = 함수 () {// 다음을 클릭합니다
      경우 (플래그) {
        플래그 = 거짓
        계산 ++
        VAR = document.querySelectorAll 당신 ( "귀하")
        li.forEach (함수 (값, 키 도착) {
          value.style.transform ROTATE3D = '-'(1,0,0, $ {* 90 ℃에서 계산})
          value.style는 [ '전이 지연'] + 0.1 * 키 'S'=
        })
        에서는 setTimeout (함수 () {
          플래그 = TRUE
        } 800)
      }
    }
    document.querySelector ( '. 사전').의 onclick = 함수 () {// 이전을 클릭
      경우 (플래그) {
        플래그 = 거짓
        카운트--
        VAR = document.querySelectorAll 당신 ( "귀하")
        li.forEach (함수 (값, 키 도착) {
          value.style.transform ROTATE3D = '-'(1,0,0, $ {* 90 ℃에서 계산})
          value.style는 [ '전이 지연'] + 0.1 * 키 'S'=
        })
        에서는 setTimeout (함수 () {
          플래그 = TRUE
        } 800)
      }
    }
  }

</ script>
</ body>
</ HTML>
도 회전 목마 - 기본도 회전 목마 JS를 사용하여

추천
