Показать сообщение отдельно
  #15 (permalink)  
Старый 26.06.2014, 14:30
Интересующийся
Отправить личное сообщение для Серега187 Посмотреть профиль Найти все сообщения от Серега187
 
Регистрация: 07.10.2013
Сообщений: 23

Ну вот, моих попыток хватило только на наведение половины красоты слайдера. Смог сделать только появление и исчезание кнопок "следующий", "предыдущий". Все работает нормально, слайдер кнопками листается,только написанный мной код скорее всего вас улыбнет Ну да и ладно... Зато работает, учитывая, что это первые мои шаги в JS и JQ. Пол дня мучаю не могу сделать плавное появление картинок, покажите как это сделать?
$(document).ready(function(){
	function getCookie(name) {
	  var matches = document.cookie.match(new RegExp(
		"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
	  ));
	  return matches ? decodeURIComponent(matches[1]) : undefined;	  
	}
	function slider(num) {
		var slider = document.getElementById('slider'),
			prev   = slider.children[0],
			next   = slider.children[1],
			inner  = slider.children[2],
			items  = inner.children,
			j      = parseInt(num);	  
		for (var i=0;i<items.length;i++){
			items[i].style.display = "none";
			if (i == j)items[i].style.display = "block";	  
		}		
		function pr(nx) {
			if (nx == "next") j++;
			if (nx == "prev") j--;			
			if (j > items.length-1) j = 0;
			if (j < 0) j = items.length-1;		  
			document.cookie = "slider=" + j + "; path=/";		  
			for (var i=0;i<items.length;i++){
				items[i].style.display = "none";
				if (i == j)items[i].style.display = "block";				
			}
		}
		setInterval(function (){pr("next")},5000);
		next.onclick = function (){pr("next")};
		prev.onclick = function (){pr("prev")};
////////////////////////////////////////////////////////////				
		$(function(){
			$('.slider').hover(
								function(event){
									$(this).children(".prev").css({"display":"block"})
								},
								function(){
									$(this).children(".prev").css({"display":"none"})
								}
							);
			$('.slider').hover(
								function(event){
									$(this).children(".next").css({"display":"block"})
								},
								function(){
									$(this).children(".next").css({"display":"none"})
								}
							);
		});		
///////////////////////////////////////
	}
	slider(getCookie('slider') || 0)
});
Ответить с цитированием