Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    27

    Inserire funzione auto su banner

    Buongiorno ragazzi,
    vi scrivo perchè sono 2 giorni che sto provando ad aggiungere l'effetto di slide automatico a questo banner:
    http://coolcarousels.frebsite.nl/c/27/
    ma non riesco a venirne fuori.

    Lo script è il seguente:

    $(function() {
    var left = {
    imgFront : -450,
    imgBack : -350,
    h3 : -300,
    p : -275,
    a : -200
    }
    var current = {
    imgFront : 30,
    imgBack : 300,
    h3 : 675,
    p : 675,
    a : 700
    }
    var right = {
    imgFront : 990,
    imgBack : 990,
    h3 : 990,
    p : 990,
    a : 990
    }

    var isScrolling = false;

    $('#carousel').carouFredSel({
    scroll : {
    duration : 0,
    pauseDuration : 3000
    },
    auto : false,
    prev : {
    button : '#prev',
    conditions : function() {
    return (!isScrolling);
    },
    onBefore : function(oldI, newI) {
    isScrolling = true;

    $(this).delay(900);

    oldI.find('img.img-front')
    .delay(400)
    .animate({
    left: right.imgFront
    });

    oldI.find('img.img-back')
    .delay(300)
    .animate({
    left: right.imgBack
    });

    oldI.find('h3')
    .delay(200)
    .animate({
    left: right.h3
    });

    oldI.find('p')
    .delay(100)
    .animate({
    left: right.p
    });

    oldI.find('a')
    .animate({
    left: right.a
    });
    },
    onAfter: function(oldI, newI) {
    oldI.find('img.img-front')
    .css({
    left: current.imgFront
    });

    oldI.find('img.img-back')
    .css({
    left: current.imgBack
    });

    oldI.find('h3')
    .animate({
    left: current.h3
    });

    oldI.find('p')
    .css({
    left: current.p
    });

    oldI.find('a')
    .css({
    left: current.a
    });

    newI.find('img.img-front')
    .css({
    left: left.imgFront
    }).delay(400)
    .animate({
    left: current.imgFront
    }, function() {
    isScrolling = false;
    });

    newI.find('img.img-back')
    .css({
    left: left.imgBack
    }).delay(300)
    .animate({
    left: current.imgBack
    });

    newI.find('h3')
    .css({
    left: left.h3
    }).delay(200)
    .animate({
    left: current.h3
    });

    newI.find('p')
    .css({
    left: left.p
    }).delay(100)
    .animate({
    left: current.p
    });

    newI.find('a')
    .css({
    left: left.a
    })
    .animate({
    left: current.a
    });
    }
    },
    next : {
    button : '#next',
    conditions : function() {
    return (!isScrolling);
    },
    onBefore : function(oldI, newI) {
    isScrolling = true;

    $(this).delay(900);

    oldI.find('img.img-front')
    .animate({
    left: left.imgFront
    });

    oldI.find('img.img-back')
    .delay(100)
    .animate({
    left: left.imgBack
    });

    oldI.find('h3')
    .delay(200)
    .animate({
    left: left.h3
    });

    oldI.find('p')
    .delay(300)
    .animate({
    left: left.p
    });

    oldI.find('a')
    .delay(400)
    .animate({
    left: left.a
    });
    },
    onAfter: function(oldI, newI) {
    oldI.find('img.img-front')
    .css({
    left: current.imgFront
    });

    oldI.find('img.img-back')
    .css({
    left: current.imgBack
    });

    oldI.find('h3')
    .animate({
    left: current.h3
    });

    oldI.find('p')
    .css({
    left: current.p
    });

    oldI.find('a')
    .css({
    left: current.a
    });

    newI.find('img.img-front')
    .css({
    left: right.imgFront
    })
    .animate({
    left: current.imgFront
    });

    newI.find('img.img-back')
    .css({
    left: right.imgBack
    }).delay(100)
    .animate({
    left: current.imgBack
    });

    newI.find('h3')
    .css({
    left: right.h3
    }).delay(200)
    .animate({
    left: current.h3
    });

    newI.find('p')
    .css({
    left: right.p
    }).delay(300)
    .animate({
    left: current.p
    });

    newI.find('a')
    .css({
    left: right.a
    }).delay(400)
    .animate({
    left: current.a
    }, function() {
    isScrolling = false;
    });
    }
    }
    });
    });


    Facendo varie prove ho notato che modificando il valore auto da false a true nel banner questo comincia ad andare da solo senza però replicarmi le animazioni. Ho provato a replicare parte del codice utilizzato sui pulsanti nel valore auto ma non riesco a farlo funzionare in nessun modo.. qualcuno sarebbe cosi gentile da darmi qualche indicazione? Anche solo su come fare.. dopo mi arrangio..
    Grazie a tutti

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    27
    nessuno?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.