Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2011, 01:48
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Пролистывание блоков по порядку
Имеется несколько блоков с информацией и управляющие кнопки.
Для каждого блока своя кнопка.
При нажатии должен отображаться соответствующий блок.

Вот код который у меня работает.

<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`ом все работает, но если его убрать то перестает.
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2011, 10:41
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

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);
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2011, 11:28
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

nikita.mmf, в вашем примере не работает автоматическое пролистывание.

Последний раз редактировалось spo, 18.07.2011 в 19:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отображение скрытых блоков Perlovka_Nat Events/DOM/Window 7 29.07.2010 20:42
Прерывание события на границе двух блоков miller Events/DOM/Window 0 25.06.2010 20:58
Скрытие резиновых блоков в зависимости от разрешения + листалка shtab Работа 2 08.06.2010 15:18
Печать невидимых блоков mixeeff Events/DOM/Window 7 11.03.2009 11:41
Копирование блоков страницы(или целиком) Phoenix Общие вопросы Javascript 30 24.03.2008 23:46