jQuery implementiert ein atmendes Karussell

<div Klasse="alle" id="box">
        <div Klasse="Bildschirm">
            <ul>
                <li><img src="images/01.jpg" width="500" height="200" /></li>
                <li><img src="images/02.jpg" width="500" height="200" /></li>
                <li><img src="images/03.jpg" width="500" height="200" /></li>
                <li><img src="images/04.jpg" width="500" height="200" /></li>
                <li><img src="images/05.jpg" width="500" height="200" /></li>
            </ul>
            <ol>
                <li Klasse="aktuell">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>

* {
            Polsterung: 0;
            Rand: 0;
            Listenstil: keiner;
            Rand: 0;
        }

        .alle {
            Breite: 500px;
            Höhe: 200px;
            Polsterung: 7px;
            Rand: 1px durchgezogen #ccc;
            Rand: 100px automatisch;
            Position: relativ;
        }

        .Bildschirm {
            Breite: 500px;
            Höhe: 200px;
            Überlauf: versteckt;
            Position: relativ;
        }

        .Bildschirm li {
            Breite: 500px;
            Höhe: 200px;
            Überlauf: versteckt;
            schweben: links;
        }

        .Bildschirm ul {
            Position: absolut;
            links: 0;
            oben: 0px;
            Breite: 2500px;
        }

        .alles ol {
            Position: absolut;
            rechts: 10px;
            unten: 10px;
            Zeilenhöhe: 20px;
            Textausrichtung: zentriert;
        }

        .alles ol li {
            schweben: links;
            Breite: 20px;
            Höhe: 20px;
            Hintergrund: #fff;
            Rand: 1px durchgezogen #ccc;
            Rand links: 10px;
            Cursor: Zeiger;
        }

        .alle ol li.current {
            Hintergrund: gelb;
        }

        #arr {
            Anzeige: keine;
        }

        #arr Spanne {
            Breite: 40px;
            Höhe: 40px;
            Position: absolut;
            links: 5px;
            oben: 50 %;
            Rand oben: -20px;
            Hintergrund: #000;
            Cursor: Zeiger;
            Zeilenhöhe: 40px;
            Textausrichtung: zentriert;
            Schriftstärke: fett;
            Schriftfamilie: „fett“;
            Schriftgröße: 30px;
            Farbe: #fff;
            Deckkraft: 0,3;
            Rand: 1px durchgezogen #fff;
        }

        #arr #rechts {
            rechts: 5px;
            links: auto;
        }

$(Funktion () {
        Var-Index = 0;
        //Maus betritt $('#box').mouseenter(function(){
            $('#arr').anzeigen();
        })
        //Maus aus $('#box').mouseleave(function(){
            $('#arr').ausblenden();
        })
        $('#rechts').Klick(Funktion(){
            if(index == $('.screen>ul>li').length-1){ //Der letzte Index = 0;
            }anders {
               Index++; 
            }
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            //Die Seitenzahl unten entspricht der Hervorhebung $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
        $('#links').klick(Funktion(){
            if(index == 0){ //Der erste Index = $('.screen>ul>li').length-1;
            }anders {
                Index--;
            }
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            //Die Seitenzahl unten entspricht der Hervorhebung $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
        })
        //Klicken Sie auf die Seitenzahl, um das Karussellbild abzuspielen$('.screen>ol>li').click(function(){
            index = $(dieser).index()
            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);
            $('.screen>ol>li').eq(index).addClass('aktuell').siblings('li').removeClass('aktuell')
        })
 });