jqueryのフェード図の回転の効果を実現

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
<メタ文字コード= "UTF-8"> 
<タイトル>渐入渐出</ TITLE> 
<スクリプトSRC = "JS / jqueryの-3.1.1。 min.js "> </ SCRIPT> 
<スクリプトSRC =" JS / bootstrap.min.js "> </ SCRIPT> 
<！ - <リンクのrel ="スタイルシート」のhref = "CSS / bootstrap.min.css"> - > 
<スタイル> 
    * { 
        パディング：0; 
        マージン：0; 
    } 
    IMG { 
        垂直整列：トップ。
    } 
    のLi { 
        リストスタイル：なし。
    } 
    .slid { 
        位置：相対。
        幅：1226px; 
        高さ：640x460ピクセル。
        マージン：100pxに自動; 
    } 
    .slidリー{
        位置：絶対; 
        トップ：0; 
        左：0; 
        表示：なし; 
    } 
    .slidスパン{ 
        表示：ブロック; 
        幅：40ピクセル; 
        高さ：40ピクセル; 
        テキスト整列：センター; 
        行の高さ：40ピクセル; 
        フォントサイズ：30px; 
        カーソル：ポインタ; 
        色：白; 
    } 
    .slidスパン：ホバー{ 
        背景：RGBA（0,0,0、0.3）; 
        変換：スケール（1.2）; 
    } 
    .PRE { 
        位置：絶対。
        トップ：200pxの。
        左：10pxの; 
    } 
    .next { 
        位置：絶対。
        トップ：200pxの。
        右：10pxの; 
    } 
    .slid Pの.CUR { 
        背景：グレー。
    } 
    .slid P { 
        位置：絶対。
        幅：130px; 
        高さ：40ピクセル; 
        下：30px; 
        右：20ピクセル; 
        背景：RGBA（0255255、0.3）; 
    } 
    .slid Pラベル{ 
        フロート：左; 
        幅：12ピクセル; 
        高さ：12ピクセル; 
        境界半径：50％。
        背景：白; 
        マージン：14px 10pxの; 
        カーソル：ポインタ; 
    } 
</スタイル> 
</ head> 
<body> 
<DIV CLASS = "スライドを" idは= "スライド">
    <UL> 
        <LI> <a href="#"> <IMG SRC = "画像/ mi1.jpg"> </a>の</ LI> 
        <LI> <a href="#"> <IMG SRC =」画像/ mi2.jpg "> </a>の</ LI> 
        <LI> <a href="#"> <IMG SRC ="画像/ mi3.jpg "> </a>の</ LI> 
        <LI> < HREF = "＃"> <IMG SRC = "画像/ mi4.jpg"> </a>の</ LI> 
    </ UL> 
    <スパンクラス= "プレ" ID = "プレ"> <</スパン> 
    <スパンクラス= "次" ID = "次の">> </ span>を
    <P ID = "インデックス"> 
        <ラベルクラス= "CUR"> </ label>は<ラベル> </ label>は<ラベル> </ラベル> <ラベル> </ label>は
    </ P> 
</ div> 

<SCRIPT> 
    のvar I = 0; 
    のvar T = 0; 
    //タイマーは、ので、画像が自動的に回転させることを
    // $（ '＃は、Liをスライドさせます' ）.EQ（I）.fadeIn（）
    $（ '＃は、LiをSLID'）EQ（I）.SHOWは（）;. 
    のautoPlay（）{//関数パッケージ機能します
        setInterval = T（関数（）{ 
            I ++は、
            IF（I> 3）{ 
                I = 0; 
            } 
            。。$（ '＃は、LiをSLID'）EQ（I）.fadeIn（1000）.siblings（）フェードアウト（1000）; 
            。$（ '＃インデックスラベル'）EQ（I）.addClass（ 'CUR'）SIBLINGS（）removeClass（ 'CUR'）; ... 
        }、3000）
    } 
    のautoPlay（）; //関数を呼び出す
    //マウスの動きとイベントの削除
    $（ '＃はSLID'）のmouseOver（{。機能（）
        てclearInterval（T）
    }）マウスアウト（{。（）関数
        のautoPlay（）; 
    }）; 
    //左矢印をクリックします
    $（ '＃の前に'）。クリック（関数（）{ 
        i--; 
        IF（I <0）{ 
            I = 3; 
        }
        $（ '＃は、Liをスライドさせる'）EQ（I）.fadeIn（1000）.siblings（）フェードアウト（1000）。。。
        $（ '＃インデックスラベル'）EQ（I）.addClass（ 'CUR'）兄弟（）removeClass（ 'CUR'）。。。。
    }）
    //右箭头点击
    $（ '＃次は'）をクリックします（関数（）{ 
        私は++; 
        （i>は3）{場合
            、私は= 0; 
        } 
        。$（ '＃は、Liをスライドさせる'）EQ（i）を.fadeIn （1000）.siblings（）フェードアウト（1000）; 
        $（ '＃インデックスラベル'）EQ（I）.addClass（ 'CUR'）兄弟（）removeClass（ 'CUR'）;。。。
    }）
    //鼠标移动到下标
    $（ '＃インデックスラベル'）マウスオーバー（関数（）{ 
        $（この）.addClass（ 'CUR'）兄弟（）removeClass（ 'CUR'）; 
        I = $（この）.INDEX （）; 
        $（」#slid李 '）EQ（I）.fadeIn（1000）.siblings（）フェードアウト（1000）。。。
    }）
</スクリプト> 
</ BODY> 
</ HTML>
jqueryのフェード図の回転の効果を実現

おすすめ
