Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2015, 17:57
Интересующийся
Отправить личное сообщение для blackcky Посмотреть профиль Найти все сообщения от blackcky
 
Регистрация: 24.10.2014
Сообщений: 25

При смене картинки в слайдере фокус возвращается к нему
Добрый день. Хочу попросить у вас помощи, дело в том , что при авто прокрутке картинок в слайдере мой фокус автоматически упирается в верхнюю планку страницы( как страница открывается по умолчанию с самого начала), там под шапкой у меня находится слайдер. При просмотре всего что ниже слайдера( или если слайдер не полностью в фокусе) меня автоматически поднимает к слайдеру как только сменяется картинка. хотелось бы, чтобы слайдер не поднимал страницу вверх каждый раз когда сменяется картинка
<a href="#">
		<div id="big-strela1"></div>
	</a>
	<a href="#">
		<div id="big-strela2"></div>
	</a>	
	<div id="content">
		<div id="black-line1">
		</div>
		<div id="slider">
			<div id="slider-uvel">
				<div class="show-slaider">
					<a href="#"><img src="images/slider-1.jpg"></a>
				</div>
				<div class="show-slaider">
					<a href="#"><img src="images/slider-2.jpg"></a>
				</div>
				<div class="show-slaider">
					<a href="#"><img src="images/slider-3.jpg"></a>
				</div>
			</div>
		</div>

#slider {
	width: 973px;
	height: 383px;
	float: left;
	overflow: hidden;
	position: relative;
}
#slider-uvel {
	width: 2919px;
	position: relative;
	z-index: 54;
}
#big-strela1 {
	height: 143px;
	width: 96px;
	z-index: 80;
	position: absolute;
	margin-top: 223px;
	margin-left: 188px;
}
a:hover #big-strela1 {
	background: url("images/big-strela1.png");
	z-index: 80;
}
#big-strela2 {
	height: 143px;
	width: 96px;
	z-index: 80;
	position: absolute;
	margin-top: 223px;
	margin-left: 1066px;
}
a:hover #big-strela2 {
	background: url("images/big-strela2.png");
	z-index: 80;
}
#strela1 {
	position: absolute;
	margin-left: 206px;
	margin-top: 270px;
	z-index: 70;
}	
#strela2 {
	position: absolute;
	margin-top: 270px;
	margin-left: 1120px;
	z-index: 70;
}

$(document).ready(function(){


	$("#big-strela2").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
		$("#slider-uvel").animate({right: "-973px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
		setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
			$("#slider-uvel .show-slaider").eq(0).clone().appendTo("#slider-uvel"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
			$("#slider-uvel .show-slaider").eq(0).remove(); // удаляем первый элемент карусели		
			$("#slider-uvel").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
		}, 10);
	});
	
	$("#big-strela1").click(function(){ // при клике на левую кнопку выполняем следующую функцию:		
		$("#slider-uvel .show-slaider").eq(-1).clone().prependTo("#slider-uvel"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора	
		$("#slider-uvel").css({"right":"-973px"}); // устанавливаем смещение набора -222px		
		$("#slider-uvel").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
		$("#slider-uvel .show-slaider").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
	});
	function autoleft(){
 	$("#big-strela2").click();
	timea=setTimeout(autoleft, 5000);
	}
 
	timea=setTimeout(autoleft, 5000);
 
	$('#slider').on('mouseenter', function(){
	clearTimeout(timea);
 
	});
 
	$('#slider').on('mouseleave', function(){
	timea=setTimeout(autoleft, 5000);

	});
});
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2015, 18:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

blackcky,
добавьте в клик отмену всплытия
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2015, 19:53
Интересующийся
Отправить личное сообщение для blackcky Посмотреть профиль Найти все сообщения от blackcky
 
Регистрация: 24.10.2014
Сообщений: 25

Сообщение от рони
добавьте в клик отмену всплытия
спасибо, буду пробовать
Ответить с цитированием
  #4 (permalink)  
Старый 19.01.2015, 14:20
Интересующийся
Отправить личное сообщение для blackcky Посмотреть профиль Найти все сообщения от blackcky
 
Регистрация: 24.10.2014
Сообщений: 25

отмену всплытия мне удалось добиться вставкой кода
$('a').click(function(event) {
  	event.preventDefault();
	});

но появилась новая проблема, перестали работать ссылки, после того как убираю А из скобок, ссылки работают, но при смене картинки снова всплывает вверх
Ответить с цитированием
  #5 (permalink)  
Старый 19.01.2015, 14:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

blackcky,
в клик по диву не отмену по умолчанию а отмену всплытия
Ответить с цитированием
  #6 (permalink)  
Старый 19.01.2015, 14:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

blackcky,
$("#big-strela2").click(function(event){ event.stopPropagation() и big-strela1 также
Ответить с цитированием
  #7 (permalink)  
Старый 19.01.2015, 15:07
Интересующийся
Отправить личное сообщение для blackcky Посмотреть профиль Найти все сообщения от blackcky
 
Регистрация: 24.10.2014
Сообщений: 25

Сообщение от рони
$("#big-strela2").click(function(event){ event.stopPropagation() и big-strela1 также
извините, но между чем и чем нужно вставить этот код, поскольку я его уже везде попробовал повставлять и результат получился не тот когорого я ожидал
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2015, 15:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

blackcky,
добавить в ваш код $("#big-strela2").click(function(event){ event.stopPropagation()
Ответить с цитированием
  #9 (permalink)  
Старый 19.01.2015, 16:44
Интересующийся
Отправить личное сообщение для blackcky Посмотреть профиль Найти все сообщения от blackcky
 
Регистрация: 24.10.2014
Сообщений: 25

Сообщение от рони
добавить в ваш код $("#big-strela2").click(function(event){ event.stopPropagation()
сделал как вы сказали, event и после фигурной скобки event.stopPropagation(), и после идет остальной код. К сожалению все так же при смене поднимает вверх
Ответить с цитированием
  #10 (permalink)  
Старый 19.01.2015, 17:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 #slider {
	width: 973px;
	height: 383px;
	float: left;
	overflow: hidden;
	position: relative;
}
#slider-uvel {
	width: 2919px;
	position: relative;
	z-index: 54;
}
#big-strela1 {
	height: 143px;
	width: 96px;
	z-index: 80;
	position: absolute;
	margin-top: 223px;
	margin-left: 188px;
}
a:hover #big-strela1 {
	background: url("images/big-strela1.png");
	z-index: 80;
}
#big-strela2 {
	height: 143px;
	width: 96px;
	z-index: 80;
	position: absolute;
	margin-top: 223px;
	margin-left: 1066px;
}
a:hover #big-strela2 {
	background: url("images/big-strela2.png");
	z-index: 80;
}
#strela1 {
	position: absolute;
	margin-left: 206px;
	margin-top: 270px;
	z-index: 70;
}
#strela2 {
	position: absolute;
	margin-top: 270px;
	margin-left: 1120px;
	z-index: 70;
}
p{
  height: 2000px;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(document).ready(function(){


	$("#big-strela2").click(function(event){event.stopPropagation();
       event.preventDefault();
      // при клике на правую кнопку запускаем следующую функцию:
		$("#slider-uvel").animate({right: "-973px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
		setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
			$("#slider-uvel .show-slaider").eq(0).clone().appendTo("#slider-uvel"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
			$("#slider-uvel .show-slaider").eq(0).remove(); // удаляем первый элемент карусели
			$("#slider-uvel").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
		}, 10);
	});

	$("#big-strela1").click(function(event){ event.stopPropagation();
     event.preventDefault();
     // при клике на левую кнопку выполняем следующую функцию:
		$("#slider-uvel .show-slaider").eq(-1).clone().prependTo("#slider-uvel"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
		$("#slider-uvel").css({"right":"-973px"}); // устанавливаем смещение набора -222px
		$("#slider-uvel").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
		$("#slider-uvel .show-slaider").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
	});
	function autoleft(){
 	$("#big-strela2").click();
	timea=setTimeout(autoleft, 5000);
	}

	timea=setTimeout(autoleft, 5000);

	$('#slider').on('mouseenter', function(){
	clearTimeout(timea);

	});

	$('#slider').on('mouseleave', function(){
	timea=setTimeout(autoleft, 5000);

	});
});

  </script>
</head>

<body>
<a href="#">
		<div id="big-strela1"></div>
	</a>
	<a href="#">
		<div id="big-strela2"></div>
	</a>
	<div id="content">
		<div id="black-line1">
		</div>
		<div id="slider">
			<div id="slider-uvel">
				<div class="show-slaider">
					<a href="#"><img src="http://javascript.ru/forum/images/smilies/stop.gif"></a>
				</div>
				<div class="show-slaider">
					<a href="#"><img src="http://javascript.ru/forum/images/smilies/victory.gif"></a>
				</div>
				<div class="show-slaider">
					<a href="#"><img src="http://javascript.ru/forum/images/smilies/wink.gif"></a>
				</div>
			</div>
		</div>
     	</div> <p></p>
</body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мигание при смене кадров paveltkachev jQuery 28 11.04.2014 11:41
изменение картинки при изменении урла и наведении курсора ahid Элементы интерфейса 2 09.02.2014 14:53
Смена background при смене слайда ! truestory Элементы интерфейса 1 17.01.2014 13:13
Смена картинки при наведении курсора на поле. ExtrAngel Общие вопросы Javascript 1 27.11.2013 23:11
Изменение картинки при ховере на ссылку DImaN Общие вопросы Javascript 0 25.12.2008 12:13