• Home
  • Forum
  • Fare Web
  • Javascript

Scorrimento automatico TAB

  • Creatore Discussione Creatore Discussione Nicola Volpi
  • Data di inizio Data di inizio 30 Mar 2015
  • Tag Tag
    autoplay tab
N

Nicola Volpi

Nuovo Utente
16 Dic 2013
4
0
0
  • 30 Mar 2015
  • #1
Buongiorno
ho questo script che mi gestisce le tab che cambiano quando ci si clicca sopra il titolo, ma vorrei inserire anche un autoplay automatico, qualcuno sa dirmi cosa ci devo inserire

questo è lo script

Codice:
$(document).on("ready", function(){
    
    
    // Al click sulla scheda
    $("a.tab").on("click", function(){
        
        // Si disattivano tutte le schede
        $(".active").removeClass("active");
        
        // Si attiva la scheda 
        $(this).addClass("active");
        
        
        // Si fa scomparire il contenuto presente l
        $(".cont").slideUp();
        
        // Si mostra il contenuto della scheda con l'effetto slideUp
        var new_content = $(this).attr("title");
        $("#" + new_content).slideDown();
    });
});
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.606
54
48
TN
  • 30 Mar 2015
  • #2
Ciao, devi iniziare separando la funzione dall'evento
Codice:
 $(document).on("ready", function(){    
        // Al click sulla scheda
        $("a.tab").on("click", function(){        
            tabs(this);
        });
    });
    
    function tabs(tab) {
        // Si disattivano tutte le schede
        $(".active").removeClass("active");        
        // Si attiva la scheda 
        $(tab).addClass("active");        
        // Si fa scomparire il contenuto presente l
        $(".cont").slideUp();        
        // Si mostra il contenuto della scheda con l'effetto slideUp
        var new_content = $(tab).attr("title");
        $("#" + new_content).slideDown();
    }
Una volta che riesci a farlo funzionare richiami il metodo a intervalli con setInterval() passandogli come parametro il tab sucessivo
 
N

Nicola Volpi

Nuovo Utente
16 Dic 2013
4
0
0
  • 30 Mar 2015
  • #3
scusa se insisto, ma come lo imposto il metodo setInterval.

Potresti ipotizzarmi il codice ?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.606
54
48
TN
  • 31 Mar 2015
  • #4
puoi provare +o- cosi
Codice:
setInterval(function(){
            // recuperi l'indice del tab selezionato e lo incrementi
            var i = $(".active").index() + 1;
            // dovrai verificare che i non sia maggiore del numero dei tab che hai
            // poi richiami la funzione passando il prossimo tab
            tabs($("a.tab").eq(i));
            // imposti l'interval per esempio ogni 2 secondi
        },2000);
 
N

Nicola Volpi

Nuovo Utente
16 Dic 2013
4
0
0
  • 1 Apr 2015
  • #5
criric ha scritto:
puoi provare +o- cosi
Codice:
setInterval(function(){
            // recuperi l'indice del tab selezionato e lo incrementi
            var i = $(".active").index() + 1;
            // dovrai verificare che i non sia maggiore del numero dei tab che hai
            // poi richiami la funzione passando il prossimo tab
            tabs($("a.tab").eq(i));
            // imposti l'interval per esempio ogni 2 secondi
        },2000);
Clicca per allargare...

Ho provato a mettere tutto questo script ma purtroppo non funziona . HELP

Codice:
 $(document).on("ready", function(){    
        // Al click sulla scheda
        $("a.tab").on("click", function(){        
            tabs(this);
        });
    });
    
    function tabs(tab) {
        // Si disattivano tutte le schede
        $(".active").removeClass("active");        
        // Si attiva la scheda 
        $(tab).addClass("active");        
        // Si fa scomparire il contenuto presente l
        $(".cont").slideUp();        
        // Si mostra il contenuto della scheda con l'effetto slideUp
        var new_content = $(tab).attr("title");
        $("#" + new_content).slideDown();
    }
	
	setInterval(function(){
            // recuperi l'indice del tab selezionato e lo incrementi
            var i = $(".active").index() + 1;
            // dovrai verificare che i non sia maggiore del numero dei tab che hai
            // poi richiami la funzione passando il prossimo tab
            tabs($("a.tab").eq(i));
            // imposti l'interval per esempio ogni 2 secondi
        },2000);
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.606
54
48
TN
  • 5 Apr 2015
  • #6
E' sicuramente da sistemare
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){    
        // Al click sulla scheda
        $("a.tab").click(function(){    
            console.log("clicco");
            tabs(this);
        });
    });
    
    function tabs(tab) {        
        // Si fa scomparire il contenuto presente l
        $("#" + $(".active").attr("title")).slideUp(function(){
            // Si disattivano tutte le schede
            $(".active").removeClass("active");        
            // Si attiva la scheda 
            $(tab).addClass("active");        
            // Si mostra il contenuto della scheda con l'effetto slideUp
            $("#" + $(tab).attr("title")).slideDown();
        });       
    }
    setInterval(function(){
        // recuperi l'indice del tab selezionato e lo incrementi
        var i = $(".active").index() + 1;
        // dovrai verificare che i non sia maggiore del numero dei tab che hai
        if($("a.tab").length <= i) {
            i = 0;
        }
        // poi richiami la funzione passando il prossimo tab
        tabs($("a.tab").eq(i));
        // imposti l'interval per esempio ogni 2 secondi
    },2000);
   
</script>
<style>
    .cont {
        width: 200px;
        height: 300px;
        border:1px solid red;
        display: none;
    }
</style>
<a href="#" class="tab active" title="uno">link uno</a>
<a href="#" class="tab" title="due">linkdue</a>
<a href="#" class="tab" title="tre">linktre</a>
<div class="cont" id="uno">div uno</div>
<div class="cont" id="due">div due</div>
<div class="cont" id="tre">div tre</div>
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

D
[HTML] scorrimento dopo un'aggiunta di dati
  • Domenico2013
  • 1 Lug 2019
  • HTML e CSS
Risposte
5
Visite
2K
HTML e CSS 3 Lug 2019
Domenico2013
D
W
[MS Access] Barre di scorrimento su maschere
  • witty27
  • 18 Gen 2019
  • MS Access
Risposte
0
Visite
2K
MS Access 18 Gen 2019
witty27
W
A
[Javascript] [CSS] elenco affiancato per evitare scorrimento pagina
  • ali7.p
  • 5 Gen 2017
  • Javascript
Risposte
4
Visite
2K
Javascript 5 Gen 2017
ali7.p
A
[Javascript] IMMAGINI A SCORRIMENTO, ANTEPRIMA 3
  • Mer556
  • 10 Nov 2016
  • Javascript
Risposte
1
Visite
2K
Javascript 12 Nov 2016
criric
G
Scorrimento immagini nel tag section
  • Giovanni255
  • 29 Set 2015
  • Javascript
Risposte
12
Visite
2K
Javascript 2 Ott 2015
Giovanni255
G
S
Problema scorrimento DIV
  • saverio_web
  • 1 Set 2015
  • Javascript
Risposte
6
Visite
2K
Javascript 3 Set 2015
saverio_web
S
S
Problema scorrimento DIV senza scrollbar
  • saverio_web
  • 1 Set 2015
  • HTML e CSS
Risposte
4
Visite
1K
HTML e CSS 1 Set 2015
saverio_web
S
plugin slider scorrimento immagini
  • asevenx
  • 18 Mag 2015
  • WordPress
Risposte
2
Visite
2K
WordPress 21 Mag 2015
asevenx
K
Script scorrimento notizie
  • kingmauri
  • 12 Gen 2015
  • Javascript
Risposte
2
Visite
2K
Javascript 16 Gen 2015
kingmauri
K
A
scorrimento all'interno database mysql riportando dati su form (tipo Dataset)
  • ans66
  • 29 Nov 2014
  • Ajax
Risposte
5
Visite
2K
Ajax 1 Dic 2014
ans66
A
Eliminare le barre scorrimento
  • filippino
  • 26 Mar 2014
  • HTML e CSS
Risposte
1
Visite
11K
HTML e CSS 26 Mar 2014
maxbossi
F
come si rileva lo scorrimento del mouse in alto o in basso?
  • Fabio90
  • 26 Gen 2014
  • Javascript
Risposte
5
Visite
2K
Javascript 27 Gen 2014
Longo8
S
DIV con scorrimento mouse
  • saverio_web
  • 30 Gen 2013
  • HTML e CSS
Risposte
1
Visite
2K
HTML e CSS 30 Gen 2013
Jonn
Scorrimento immagine che si sviluppa orizontalmente
  • Danyb82
  • 18 Dic 2012
  • jQuery
Risposte
3
Visite
2K
jQuery 21 Dic 2012
Nefyt
N
A
Estrarre solo un certo numero di record e scorrimento pagine
  • andrex1191
  • 10 Nov 2011
  • PHP
Risposte
9
Visite
2K
PHP 16 Nov 2011
andrex1191
A
P
Scorrimento array-pagine
  • peppepegasus
  • 10 Giu 2011
  • PHP
Risposte
0
Visite
2K
PHP 10 Giu 2011
peppepegasus
P
A
codice html al posto delle immagini in una finestra di scorrimento
  • ali7.p
  • 8 Mar 2011
  • Javascript
Risposte
0
Visite
2K
Javascript 8 Mar 2011
ali7.p
A
M
Scorrimento solo di una parte di pagina - dreamweaver cs3
  • mionomemionome
  • 9 Feb 2011
  • Webdesign e Grafica
Risposte
1
Visite
2K
Webdesign e Grafica 12 Feb 2011
gianni21031
M
Scorrimento solo di una parte di pagina - dreamweaver cs3
  • mionomemionome
  • 9 Feb 2011
  • HTML e CSS
Risposte
0
Visite
2K
HTML e CSS 9 Feb 2011
mionomemionome
M
A
scorrimento orizzontale
  • acweb-2004
  • 4 Nov 2010
  • HTML e CSS
Risposte
2
Visite
4K
HTML e CSS 4 Nov 2010
acweb-2004
A
Condividi:
Facebook X (Twitter) LinkedIn WhatsApp e-mail Condividi Link
  • Home
  • Forum
  • Fare Web
  • Javascript
  • Italiano
  • Termini e condizioni d'uso del sito
  • Policy Privacy
  • Aiuto
  • Home
Community platform by XenForo® © 2010-2024 XenForo Ltd. | Traduzione a cura di XenForo Italia
Menu
Accedi

Registrati

  • Home
  • Forum
    • Nuovi Messaggi
    • Cerca...
  • Novità
    • Featured content
    • Nuovi Messaggi
    • Ultime Attività
X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?

X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?