Пролистывание блоков по порядку
Имеется несколько блоков с информацией и управляющие кнопки.
Для каждого блока своя кнопка. При нажатии должен отображаться соответствующий блок. Вот код который у меня работает. <div class="wrapper"> <div id="info1" class="info">1</div> <div id="info2" class="info">2</div> <div id="info3" class="info">3</div> <div class="ctrl"> <a href="#info1">1</a> <a href="#info2">2</a> <a href="#info3">3</a> </div> </div>
$('div.info').hide();
$('div.info:first-child').show();
$('div.ctrl a:first-child').addClass('active');
$('div.ctrl a').click(function() {
$('div.info').hide();
$('div.ctrl a').removeClass('active');
$(this).addClass('active');
$($(this).attr('href')).show().addClass('active');
return false
});
Однако, возникла задача добавить автоматическое переключение по порядку до конца и так по кругу. Я дописал код, но он почему то не работает. Не могу понять почему.
$(function() {
$('div.info').hide();
$('div.info:first-child').show();
$('div.ctrl a:first-child').addClass('active');
$('div.ctrl a').click(function() {
$('div.info').hide();
$('div.ctrl a').removeClass('active');
$(this).addClass('active');
$($(this).attr('href')).show().addClass('active');
return false
});
setInterval(slide, 1000);
function slide() {
var links = $('div.ctrl a').size();
for(var i=1; i<=links; i++) {
if(i<3) {
alert('if');
$('div.info').hide();
$('div.ctrl a.active').removeClass('active').next().addClass('active');
$($('div.ctrl a.active').attr('href')).show().addClass('active');
}
else {
alert('else');
$('div.info').hide();
$('div.ctrl a').removeClass('active');
$('div.ctrl a:first-child').addClass('active');
$($('div.ctrl a.active').attr('href')).show().addClass('active');
}
}
}
});
Там есть строки с alert это я делал для проверки. Интересно то что с этим alert`ом все работает, но если его убрать то перестает. |
var $info = $('div.info');
var $link = $('div.ctrl a').click(function() {
var $self = $(this).addClass('active');
$self.siblings(".active").removeClass("active");
$info.hide().removeClass("active");
$($self.attr('href')).show().addClass('active');
return false;
}).first().triggerHandler("click");
function slide(){
$link = $link.next();
if ( !$link.length ) {
$link = $link.prevAll("a").first();
}
$link.triggerHandler("click");
}
setInterval(slide, 1000);
|
nikita.mmf, в вашем примере не работает автоматическое пролистывание.
|
| Часовой пояс GMT +3, время: 22:19. |