Verwenden Sie jQuery, um die Focus Map Special Effects_jquery der offiziellen Apple-Website zu imitieren

#Galerie{
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;
    /* CSS3 abgerundete Ecken */
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    border:1px einfarbig weiß;
    Hintergrund:url(img/panel.jpg) wiederholen-x unten in der Mitte #ffffff;
    /* Die Breite der Galerie */
    Breite:920px;
    Überlauf:versteckt;
}
#Folien{
    /* Dies ist der Folienbereich */
    Höhe:400px;
    /* jQuery ändert die Breite später auf die Summe der Breiten aller Folien. */
    Breite:920px;
    Überlauf:versteckt;
}
.slide{
    float:left;
}
#menu{
    /* Dies ist der Container für die Miniaturansichten */
    Höhe:45px;
}
ul{
    margin:0px;
    padding:0px;
}
li{
    /* Jedes Miniaturbild ist ein Li-Element */
    Breite:60px;
    display:inline-block;
    Listenstil:none;
    Höhe:45px;
    Überlauf:versteckt;
}
li.inact:hover{
    /* Der inaktive Zustand, hervorgehoben bei Mouseover */
    Hintergrund:url(img/pic_bg.png) wiederholen;
}
li.act,li.act:hover{
    /* Der aktive Zustand des Daumens */
    Hintergrund:url(img/active_bg.png) no-repeat;
}
li.act a{
    Cursor:Standard;
}
.fbar{
    /* Der vertikale Balken ganz links neben dem ersten Miniaturbild */
    Breite:2px;
    Hintergrund:url(img/divider.png) no-repeat right;
}
li a{
    display:block;
    Hintergrund:url(img/divider.png) no-repeat right;
    Höhe:35px;
    padding-top:10px;
}
ein img{
    border:none;
}

$(document).ready(function(){
    /* Dieser Code wird ausgeführt, nachdem das DOM vollständig geladen wurde */
    var totWidth=0;
    var positions = new Array();
    $('#slides .slide').each(function(i){
        /* Durchlaufe alle Folien und speichere ihre Gesamtbreite in totWidth */
        positions[i]= totWidth;
        totWidth = $(this).width();
        /* Das Positions-Array enthält den kommutativen Offset jeder Folie vom linken Teil des Containers */
        if(!$(this).width())
        {
            warning("Bitte geben Sie Breite und Höhe für alle Ihre Bilder ein!");
            return false;
        }
    });
    $('#slides').width(totWidth);
    /* Ändere die Breite des Cotnainer-Divs auf die exakte Breite aller Folien zusammen */
    $('#menu ul li a').click(function(e,keepScroll){
            /* Klicken Sie auf ein Miniaturbild */
            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
            var pos = $(this).parent().prevAll('.menuItem').length;
            $('#slides').stop().animate({marginLeft:-positions[pos] 'px'},450);
            /* Starte die Gleitanimation */
            e.preventDefault();
            /* Verhindert die Standardaktion des Links */
            // Stoppen des automatischen Vorlaufs, wenn auf ein Symbol geklickt wurde:
            if(!keepScroll) clearInterval(itvl);
    });
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* Markieren Sie beim Laden der Seite das erste Miniaturbild als aktiv */
    /*****
     *
     *    Automatisches Vorrücken aktivieren.
     *
     ****/
    var current=1;
    Funktion autoAdvance()
    {
        if(current==-1) return false;
        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] wird als keepScroll-Parameter der Click-Funktion in Zeile 28
übergeben         aktuell ;
    }
    // Die Anzahl der Sekunden, in denen der Schieberegler automatisch vorrückt:
    var changeEvery = 10;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
    /* Ende der Anpassungen */
});