jQuery は呼吸カルーセルを実装します

<div class="all" id="box">
        <div class="screen">
            <ul>
                <li><img src="images/01.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/02.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/03.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/04.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="images/05.jpg" 幅="500" 高さ="200" /></li>
            </ul>
            <オル>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
</div>

* {
            パディング: 0;
            マージン: 0;
            リストスタイル: なし;
            境界線: 0;
        }

        。全て {
            幅: 500ピクセル;
            高さ: 200px;
            パディング: 7px;
            境界線: 1px 実線 #ccc;
            マージン: 100px 自動;
            位置: 相対的;
        }

        .スクリーン{
            幅: 500ピクセル;
            高さ: 200px;
            オーバーフロー: 非表示;
            位置: 相対的;
        }

        .screen li {
            幅: 500ピクセル;
            高さ: 200px;
            オーバーフロー: 非表示;
            フロート: 左;
        }

        .screen ul {
            位置: 絶対;
            左: 0;
            上: 0px;
            幅: 2500ピクセル;
        }

        .all ol {
            位置: 絶対;
            右: 10px;
            下: 10px;
            行の高さ: 20px;
            テキスト配置: 中央;
        }

        .all ol li {
            フロート: 左;
            幅: 20px;
            高さ: 20px;
            背景: #fff;
            境界線: 1px 実線 #ccc;
            左マージン: 10px;
            カーソル: ポインタ;
        }

        .all ol li.current {
            背景: 黄色;
        }

        #arr {
            表示: なし;
        }

        #arr スパン {
            幅: 40px;
            高さ: 40px;
            位置: 絶対;
            左: 5px;
            上位: 50%;
            上マージン: -20px;
            背景: #000;
            カーソル: ポインタ;
            行の高さ: 40px;
            テキスト配置: 中央;
            フォントの太さ: 太字;
            フォントファミリ: '太字';
            フォントサイズ: 30px;
            色: #fff;
            不透明度: 0.3;
            境界線: 1px 実線 #fff;
        }

        #arr #right {
            右: 5px;
            左: 自動;
        }

$(関数() {
        var インデックス = 0;
        //マウスが入る $('#box').mouseenter(function(){
            $('#arr').表示();
        })
        //マウスを$('#box')から出します。mouseleave(function(){
            $('#arr').hide();
        })
        $('#right').click(function(){
            if(index == $('.screen>ul>li').length-1){ //最後のもの index = 0;
            }それ以外 {
               インデックス++; 
            }
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            //以下のページ番号はハイライトに対応します $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
        $('#left').click(function(){
            if(index == 0){ //最初のインデックス = $('.screen>ul>li').length-1;
            }それ以外 {
                索引 - ;
            }
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            //以下のページ番号はハイライトに対応します $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
        //ページ番号をクリックするとカルーセル画像が再生されます$('.screen>ol>li').click(function(){
            インデックス = $(this).index()
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
 });