При смене картинки в слайдере фокус возвращается к нему
Добрый день. Хочу попросить у вас помощи, дело в том , что при авто прокрутке картинок в слайдере мой фокус автоматически упирается в верхнюю планку страницы( как страница открывается по умолчанию с самого начала), там под шапкой у меня находится слайдер. При просмотре всего что ниже слайдера( или если слайдер не полностью в фокусе) меня автоматически поднимает к слайдеру как только сменяется картинка. хотелось бы, чтобы слайдер не поднимал страницу вверх каждый раз когда сменяется картинка
<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); }); }); |
blackcky,
добавьте в клик отмену всплытия |
Цитата:
|
отмену всплытия мне удалось добиться вставкой кода
$('a').click(function(event) { event.preventDefault(); }); но появилась новая проблема, перестали работать ссылки, после того как убираю А из скобок, ссылки работают, но при смене картинки снова всплывает вверх |
blackcky,
в клик по диву не отмену по умолчанию а отмену всплытия |
blackcky,
$("#big-strela2").click(function(event){ event.stopPropagation() и big-strela1 также |
Цитата:
|
blackcky,
добавить в ваш код $("#big-strela2").click(function(event){ event.stopPropagation() |
Цитата:
|
:-?
<!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> |
Часовой пояс GMT +3, время: 11:24. |