0

buen día, dentro de mi html tengo el siguiente codigo

<div class="contenedor">

        <nav class="menu">
            <ul>
                <li><button ="slide_1" onclick="openCity(event, 'Profesor')" id="defaultOpen">contenido1</button></li>
                <li><button data-links-to="slide_2" onclick="openCity(event, 'Berlin')">contenido2</button></li>
                <li><button onclick="openCity(event, 'Tokio')">contenido3</button></li>
                <li><button onclick="openCity(event, 'Helsinki')">contenido4</button></li>
        </ul>


        </nav>
    </div>

Como pueden ver este codigo llama una funcion llamada openCity la funcion esta en el mismo html y lo que hace es llenar un div con contenido de la siguiente forma

function openCity(evt, cityName) 
    {
        var i, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) 
        {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) 
        {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }


// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click(); 

entonces la clase menu son botones de contenido lo que quiero hacer es que haga un barrido por los botones cambiando contenido cada 15 segundos, intente con lo siguiente pero no funciona.

jqs_slideList: '.tabcontent',
jqs_tabList: '.slides .menu',


init: function() {
    //init sliders
    var aSliders = $(this.jqs_slideList);
    if (aSliders.length > 0) {
        this.slideShow(aSliders);
    }

    //init the carousels that are lists of links
    $('.carousel.icons').hellmannsCrsl({
        rotateSpeed: 5000,
        viewport: '.menu'
    });
},

slideShow: function(eSlideListParam) {
    var slideList = eSlideListParam,
        slides = slideList.find('li'),
        tabList = slideList.siblings('.menu'),
        tabs = tabList.find('li'),
        speed = 500;


    tabs.on('click', 'button', function(e) {
        $(this).trigger('slides.swap');
        e.preventDefault();
    });

    //make it automatic, but this doesn't work properly, I'm stuck...
    setInterval(function() {
        var current = parseInt($('li.selected button').on('click').split('_')[1],10);
        var idx=current-1;
        var max = $('.menu li button').length;
        idx = (current<max) ? (idx+1):0;
        $('button:eq('+idx+')').trigger('click');
    }, 3000);

    /**
     * This is where the animation, i.e. fade, is performing.
     * I find it quite convenient to use bind/trigger principle as it's easier to maintain
     */
    tabs.find('button').bind('slides.swap', function() {
        var self = $(this),
            selfIndex = self.parent().index(),
            targetSlide = slides.eq(selfIndex);

        //fade in/out slides
        slides.filter('.active').stop(true, false).fadeOut(speed, function() {
            $(this).removeClass('active');
        });
        targetSlide.stop(true, false).fadeIn(speed).addClass('active');

        tabs.removeClass('selected');
        self.parent().addClass('selected');
    });
}

Agradezco mucho su ayuda o si me recomiendan otra manera de hacerlo, si necesitan el codigo completo o mas código me comentan.

2
  • Podrías precargar todos los botones, guardarlos en un array y después inicializar el setInterval. Con cada callback, se suma el conteo y el botón al que hay que hacerle click se calcularía de la forma const btn = buttons[ k % buttons.length ], donde buttons es el array de botones y k el contador que se incrementa en uno por ciclo.
    – VRoxa
    Commented el 9 jun. 2020 a las 13:08
  • Podrías ayudarme a agregarlo a mi código. Commented el 9 jun. 2020 a las 21:36

1 respuesta 1

0

No estoy seguro de querer publicar la respuesta porque no entiendo demasiado tu código.
Me parece que sobran bastantes líneas en tu publicación que no son relevantes para la duda; y que faltan algunas que lo dejen más claro.
De todas formas, voy a redactar de forma un poco más extensa el comentario.

Se trata de mantener en un array de los botones a iterar.

// Hago la query con Vanilla JavaScript,
// tú puedes hacerla con jQuery perfectamente.
const buttons = document.querySelectorAll('.menu button');

Después, definimos una función (el setInterval) con un contador de vueltas.
Este contador servirá de índice para iterar sobre los botones.

const cron = (millis, callback) => {
  const buttons = document.querySelectorAll('.menu button');
  let count = 0;

  // Saca el siguiente botón.
  // Va de forma cíclica sobre los índices del
  // array (con el módulo)
  const getNext = () =>
    buttons[count++ % buttons.length];

  return setInterval(() => {
    const button = getNext();
    callback(button);
  }, millis);
}

La misma función cron devuelve el Timer para poderlo cancelar cuando lo necesites.

// Cada 15 segundos te va a dar el siguiente button
// por lo que puedes hacer con él lo que necesites.
const interval = cron(15000, button => {
  // o button.trigger('click'), no sé el que necesites
  button.click(); 
});

... y cuando quieras cancelar el Timer para que no siga dándote más botones, lo puedes hacer de la siguiente forma.

clearInterval(interval);

Espero que sirva.

1
  • Gracias Lo intentare ahora mismo. Commented el 16 jun. 2020 a las 15:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.