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.
setInterval
. Con cada callback, se suma el conteo y el botón al que hay que hacerle click se calcularía de la formaconst btn = buttons[ k % buttons.length ]
, dondebuttons
es el array de botones yk
el contador que se incrementa en uno por ciclo.