Переход на следующий слайд
Добрый день, есть верстка для галереи:
<div class="slides">
<div class="slide 1th"></div>
<div class="slide 2th"></div>
<div class="slide 3th"></div>
</div>
<div class="nav">
<div class="btn-group">
<div class="btn active"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
</div>
Как сделать автоматический запуск слайдов? Делаю так - эмулирую нажатие на кнопку навигации: setInterval(function(){
jQuery('.btn').trigger('click');
}, 6000);
Как сделать эмуляцию клика на следующий пункт навигации? Спасибо. |
Цитата:
Если так, то: - ищем кнопку с классом active - берем следующую за ней и кликаем - если следующей нет, берем первую и кликаем на ней |
Цитата:
Вернее второй и третий пункты? |
Дохожу до последнего, и останавливается:(
setInterval(function(){
var elem = jQuery('.btn-group .active').next();
if ( jQuery(elem).is(':last') ) {
jQuery('.btn-group .btn').trigger('click');
} else {
jQuery(elem).trigger('click');
}
}, 6000);
|
var i = 0
setInterval(function(){
$('.btn').eq(i).trigger('click');
i++;
if(i==2) i = 0;
}, 6000);
как то так |
Дело в том, что заведомо неизвестно, сколько будет слайдов.
|
var i = 0
setInterval(function(){
$('.btn').eq(i).trigger('click');
i++;
if(i== $('.slide').length-1) i = 0;
}, 6000);
тогда так |
Первый слайд меняется только со второй попытки. Обновляет у него класс active, и только потом переходит на второй.
|
Цитата:
jQuery('.btn-group .btn:first-child').trigger('click');
|
Кроме того, у меня пять слайдов, а с 4 прыгает на первую.
|
Все равно застопорился. Консоль не выдает ошибок :(
|
Большое спасибо всем, кто помог.
Финальный рабочий вариант: setInterval(function(){
var elem = jQuery('.btn-group .active').next();
if ( jQuery(elem).is(':last-child') ) {
jQuery('.btn-group .btn:first-child').trigger('click');
} else {
jQuery(elem).trigger('click');
}
}, 6000);
|
var i = 0
setInterval(function(){
i++;
$('.btn').eq(i).trigger('click');
if(i== $('.slide').length-1) i = -1;
}, 6000);
|
Цитата:
Вот про что я писал ранее <!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
ul > li {
display: none;
}
ul > li.on {
display: list-item;
}
</style>
<script type='text/javascript'>
$(function(){
setInterval(function(){
var o=$('ul > .on').next();
$('ul > .on').removeClass('on');
if (o.length==0) {
$('ul > li:first-child').addClass('on');
} else {
o.addClass('on');
};
},2000);
});
</script>
</head>
<body>
<ul>
<li class='on'>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
|
j0hnik, заводить переменную кагбэ "избыточно" в этом ДОМ-варианте. Т.к. все уже есть для решения задачи. ;)
|
:p
|
| Часовой пояс GMT +3, время: 14:00. |