2011-09-02 5 views
0

J'ai du code qui génère des boutons prev/next et fait défiler un groupe d'images en utilisant deux fonctions nextPhoto et prevPhoto. Je me demandais si quelqu'un pouvait m'aider à transformer ce code en un diaporama automatique?jquery help needed - créer un diaporama automatique

Voici mon code:

$max = 8; 
$current = 1 
function nextPhoto() { 
    if ($current != $max) { 
    $('.slider'+($current)+'').hide(); 
    $('.slider'+($current+1)+'').show(); 
    $('.slider'+($current+1)+'').css('left', '20%'); 
    $('.slider'+($current+1)+'').animate({left:'0%'}, {duration:500, easing:"easeOutExpo", queue:false}); 
    resizeImages(); 
    $current++; 
    } 
    if ($current == 2) { 
    $('#background .left').animate({left:'0px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    } 
    if ($current == $max) { 
    $('#background .right').animate({right:'-85px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    setInterval("restartSlider()", 5000); 
    } 
} 
function prevPhoto() { 
    resizeImages(); 
    if ($current != 1) { 
    $('.slider'+($current)+'').hide(); 
    $('.slider'+($current-1)+'').show(); 
    $('.slider'+($current-1)+'').css('left', '-20%'); 
    $('.slider'+($current-1)+'').animate({left:'0%'}, {duration:500, easing:"easeOutExpo", queue:false}); 
    resizeImages(); 
    $current --; 
    } 
    if ($current == 1) { 
    $('#background .left').animate({left:'-85px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    } 
    if ($current == $max-1) { 
    $('#background .right').animate({right:'0px'}, {duration:600, easing:"easeOutExpo", queue:false}); 
    } 
} 

$('.right').mouseup(function(){ 
    nextPhoto(); 
}) 
$('.left').mouseup(function(){ 
    prevPhoto(); 
}) 

Répondre

1

Je vous suggère d'utiliser déjà disponible et largement utiliser le plugin pour cette jQuery cycle au lieu d'écrire votre propre. Jetez un oeil à cela, il offre beaucoup de fonctionnalités. Je suis sûr que cela va certainement vous aider.

+0

Yeh c'est un curseur de fond plein écran .. redimensionne en fonction de ur res d'écran. – SoulieBaby

+0

Je vois, Pouvez-vous créer un violon pour votre question? – ShankarSangoli

+0

Je n'ai jamais utilisé cela auparavant, mais l'URL est http://icta.website.2011.360southclients.com/home.html si vous voulez voir ce que je suis en train de faire? – SoulieBaby

1

En supposant que vos méthodes nextPhoto() et prevPhoto() fonctionnent, je définirais simplement un intervalle pour un temporisateur.

var delay = 5000; //5 seconds 
var timer = window.setInterval('nextPhoto()', delay); 

et de l'arrêter

clearInterval(timer);