JQuery와 페이드도 회전의 효과를 실현

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<head> 
<메타 문자 집합 = "UTF-8"> 
<제목>渐入渐出</ 제목> 
<스크립트 SRC = "JS / JQuery와 - 3.1.1. min.js "> </ script> 
<스크립트 SRC ="JS / bootstrap.min.js "> </ script> 
<! - <링크 확인해 ="스타일 시트 "HREF ="CSS / bootstrap.min.css "> -> 
<스타일> 
    * { 
        패딩 : 0; 
        여백 : 0; 
    } 
    IMG { 
        수직 정렬 : 상부; 
    } 
    리 { 
        목록 스타일 : 없음; 
    } 
    .slid { 
        총수 : 상대적; 
        폭 : 1226px; 
        높이 : 460px; 
        마진 : 100 픽셀 자동; 
    } 
    .slid 리 {
        위치 : 절대; 
        최고 : 0; 
        왼쪽 : 0; 
        디스플레이 : 없음; 
    } 
    .slid 스팬 { 
        디스플레이 : 블록; 
        폭 : 40px; 
        높이 : 40px; 
        텍스트 정렬 : 센터; 
        라인 높이 : 40px; 
        폰트 크기 : 30 픽셀; 
        커서 : 포인터; 
        색상 : 흰색; 
    } 
    .slid 범위 : {호버 
        배경 : RGBA (0,0,0, 0.3); 
        변환 : 스케일 (1.2); 
    } 
    .PRE { 
        총수 : 절대; 
        최고 : 200 픽셀; 
        왼쪽 : 10px; 
    } 
    다음 내용 { 
        총수 : 절대;
        최고 : 200 픽셀; 
        오른쪽 : 10px; 
    } 
    .slid P는 .CUR { 
        배경 : 회색; 
    } 
    P {.slid 
        총수 : 절대; 
        폭 : 130 x 96 픽셀; 
        높이 : 40px; 
        바닥 : 30 픽셀; 
        오른쪽 : 20 픽셀; 
        배경 : RGBA (0255255, 0.3); 
    } 
    .slid P 라벨 { 
        플로트 : 왼쪽; 
        폭 : 12 픽셀; 
        높이 : 12 픽셀; 
        경계 반경 : 50 %; 
        배경 : 흰색; 
        여백 : 14px 10px; 
        커서 : 포인터; 
    } 
</ 스타일> 
</ head> 
<body> 
<div 클래스 = "하락"을 ID가 = "하락">
    <UL> 
        <LI> <A보기 </a> <IMG의 SRC = "이미지 / mi1.jpg"> </A> </ 리> 
        <LI> <A보기 </a> <IMG의 SRC = " 이미지 / mi2.jpg "> </A> </ 리> 
        <LI> <A보기 </a> <IMG의 SRC ="이미지 / mi3.jpg "> </A> </ 리> 
        <LI> < A HREF = "#"> <IMG SRC = "이미지 / mi4.jpg"> </A> </ 리> 
    </ UL> 
    <스팬 클래스 = "사전"ID = "프리"> <</ SPAN> 
    < 스팬 클래스 = "다음"ID = "다음">> </ SPAN> 
    <p ID = "인덱스"> 
        <Label 클래스 = "CUR"> </ 라벨> <라벨> </ 라벨> <라벨> </ 라벨> <레이블> </ 라벨> 
    </ P> 
</ DIV> 

<script> 
    var에 나는 = 0; 
    var에 T = 0; 
    // 타이머, 그래서 이미지가 자동으로 회전하는 것이 
    // $ ( '# 리튬 하락' ) .EQ는 (I)이 .fadeIn () 
    $ ((I)가이 .Show ();) EQ를 '#이 리 하락' 
    자동 실행을 함수 () {// 함수 패키지
        하여 setInterval = T (함수 () { 
            I가 ++; 
            IF (I> 3) {. 
                I = 0; 
            } 
            . $ (EQ) (I) .fadeIn (1000) .siblings () '# 리튬 하락'(1000) 페이드를 .;. 
            . $ ( '# 인덱스 라벨') EQ (I) .addClass ( 'CUR') SIBLINGS () removeClass ( 'CUR'); ... 
        }, 3000) 
    } 
    자동 실행 (); // 함수 호출 
    // 마우스 움직임과 이벤트 제거 
    $를 mouseOver로 ({. () 함수 ( '# 미끄러') 
        사항 clearInterval (t) 
    })로 마우스를 (함수 () {. 
        자동 실행 (); 
    }); 
    // 왼쪽 화살표를 클릭 
    $ ( '# 사전'). 의 Click (함수 () { 
        난 -; 
        IF (I는 0 <) { 
            I = 3]. 
        }
        $ ( '# 리튬 미끄러') 당량 (I) .fadeIn (1000) .siblings () 페이드 아웃 (1000)..; 
        . $ ( '# 인덱스 라벨') EQ (I) .addClass ( '똥개') 형제 자매 () removeClass ( '똥개')..; 
    }) 
    //右箭头点击
    $ ( '# 다음')을 클릭 (함수 (.) { 
        내가 ++; 
        (나는> 3) {경우 
            I = 0; 
        } 
        . $ ( '#이 리 슬라이드') EQ (i)를 .fadeIn (1000) .siblings () 페이드 아웃 (1000). 
        $ ( '# 인덱스 라벨') EQ (I) .addClass ( '똥개') 형제 자매 () removeClass ( '똥개');... 
    }) 
    //鼠标移动到下标
    $ ( '# 인덱스 라벨') 마우스 오버 (함수 () {. 
        $ (이) .addClass ( 'CUR') 형제 () removeClass ( 'CUR');.. 
        난 = $ (이)있는 .index (); 
        $ ( ' #slid 리 ') 당량 (I) .fadeIn (1000) .siblings () 페이드 아웃 (1000)..; 
    })
</ script> 
</ BODY> 
</ HTML>
JQuery와 페이드도 회전의 효과를 실현

추천
