Utilisez jQuery pour imiter la carte de focus du site officiel d'Apple effets spéciaux_jquery

#galerie{
    /* Ombre de la boîte CSS3 */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;
    /* Coins arrondis CSS3 */
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    bordure-bas-gauche-radius:4px;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    bordure-bas-droit-radius:4px;
    bordure : 1px blanc uni ;
    background:url(img/panel.jpg) répéter-x en bas au centre #ffffff;
    /* La largeur de la galerie */
    largeur:920px;
    débordement : masqué ;
>
#diapositives{
    /* Ceci est la zone des diapositives */
    hauteur:400px;
    /* jQuery modifie ultérieurement la largeur en la somme des largeurs de toutes les diapositives. */
    largeur:920px;
    débordement : masqué ;
>
.slide{
    float:gauche;
>
#menu{
    /* Ceci est le conteneur pour les vignettes */
    hauteur:45px;
>
ul{
    marge:0px;
    remplissage:0px;
>
li{
    /* Chaque vignette est un élément li */
    largeur:60px;
    display:inline-block;
    style de liste : aucun ;
    hauteur:45px;
    débordement : masqué ;
>
li.inact:survol{
    /* L'état inactif, mis en évidence au survol de la souris */
    background:url(img/pic_bg.png) répéter;
>
li.act,li.act:survol{
    /* L'état actif du pouce */
    background:url(img/active_bg.png) no-repeat;
>
li.agir a{
    curseur:par défaut;
>
.fbar{
    /* La barre verticale la plus à gauche, à côté de la première vignette */
    largeur:2px;
    background:url(img/divider.png) pas de répétition à droite ;
>
li un{
    display:bloc;
    background:url(img/divider.png) pas de répétition à droite ;
    hauteur:35px;
    rembourrage-top:10px;
>
une image{
    bordure : aucune ;
>

$(document).ready(function(){
    /* Ce code est exécuté une fois le DOM complètement chargé */
    var totWidth=0;
    var positions = nouveau tableau();
    $('#slides .slide').each(function(i){
        /* Parcourez toutes les diapositives et stockez leurs largeurs cumulées dans totWidth */
        positions[i]= totWidth;
        totWidth = $(this).width();
        /* Le tableau positions contient le décalage commulutatif de chaque diapositive par rapport à la partie gauche du conteneur */
        si(!$(this).width())
        {
            alert("S'il vous plaît, remplissez la largeur et la hauteur de toutes vos images!");
            retourner faux ;
        >
    });
    $('#slides').width(totWidth);
    /* Change la largeur du div cotnainer à la largeur exacte de toutes les diapositives combinées */
    $('#menu ul li a').click(function(e,keepScroll){
            /* Sur une vignette cliquez */
            $('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);
            /* Démarre l'animation de glissement */
            e.preventDefault();
            /* Empêcher l'action par défaut du lien */
            // Arrêt de l'avance automatique si une icône a été cliquée :
            if(!keepScroll) clearInterval(itvl);
    });
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* Au chargement de la page, marquez la première vignette comme active */
    /*****
     *
     *    Activation de l'avance automatique.
     *
     ****/
    var courant=1;
    fonction autoAdvance()
    {
        if(current==-1) return false;
        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] sera passé comme paramètre keepScroll de la fonction click à la ligne 28
        actuel ;
    >
    // Le nombre de secondes pendant lesquelles le curseur avancera automatiquement :
    var changementChaque = 10;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
    /* Fin des personnalisations */
});