Scorrimento automatico TAB

[Nicola Volpi]

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

$(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]

Ciao, devi iniziare separando la funzione dall'evento

 $(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

 

[Nicola Volpi]

scusa se insisto, ma come lo imposto il metodo setInterval.

Potresti ipotizzarmi il codice ?

 

[criric]

puoi provare +o- cosi

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]

puoi provare +o- cosi

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

 $(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]

E' sicuramente da sistemare

<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>