Scorrimento automatico TAB

Nicola Volpi

Nuovo Utente
16 Dic 2013
4
0
0
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.607
54
48
TN
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
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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);
 

Nicola Volpi

Nuovo Utente
16 Dic 2013
4
0
0
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);
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.607
54
48
TN
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>