Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2016, 20:22
Новичок на форуме
Отправить личное сообщение для maxpopov89 Посмотреть профиль Найти все сообщения от maxpopov89
 
Регистрация: 22.08.2016
Сообщений: 5

Ссылки в слайдере
Здравствуйте!
Возникла проблема. Имеется слайдер с автопролистыванием и кнопками навигации в лева/права, в полне себе устраивает. Появилась необходимость по щелчку на слайд, переходить на соответствующую данному слайду страницу. С JS я совсем не знаком, поэтому прошу помощи. Ниже код:

HTML:

...
<aside>
<div id="scr">
<div id="bleft" onclick="slider.left();"></div>
<div id="bright" onclick="slider.right();"></div>
</div>
</aside>
...

CSS:

aside {
position: relative;
margin: 20px 20px;
width: 920px;
height: 260px;
background-image: url(images/slayder/bgbaner.png);
}

#scr {
position: absolute;
width: 900px;
height: 240px;
margin: 10px;
}

#bleft {
position: absolute;
width: 25px;
height: 40px;
top: 100px;
left: 10px;
background-image: url(images/slayder/bleft.png);
}

#bright {
position: absolute;
width: 25px;
height: 40px;
top: 100px;
/*left: 865px;*/
right: 10px;
background-image: url(images/slayder/bright.png);
}

JS:

var slider = {
slides:['./images/slayder/baners/build.jpg','./images/slayder/baners/service.jpg','./images/slayder/baners/modern.jpg','./images/slayder/baners/support.jpg'],
frame:0, // текущий кадр для отображения - индекс картинки из массива
set: function(image) { // установка нужного фона слайдеру
document.getElementById("scr").style.backgroundIma ge = "url("+image+")";
},
init: function() { // запуск слайдера с картинкой с нулевым индексом
this.set(this.slides[this.frame]);
},
left: function() { // крутим на один кадр влево
this.frame--;
if(this.frame < 0) this.frame = this.slides.length-1;
this.set(this.slides[this.frame]);
},
right: function() { // крутим на один кадр вправо
this.frame++;
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};

window.onload = function() { // запуск слайдера после загрузки документа
slider.init();
setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок
slider.right();
},15000);
};

Что нужно дописать, и возможно ли (при том что слады ставятся ставятся как фон блока), что бы при клике на слайд, переходить на соответствующую ему страницу?
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2016, 07:31
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от maxpopov89
переходить на соответствующую ему страницу?

Сначала соответствия представь, или откуда брать адрес страницы соответствующий картинке?

То есть slides: будет массивов объектов, а значит методы слайдера придется переписывать.

Последний раз редактировалось warren buffet, 23.08.2016 в 07:37.
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2016, 13:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от warren buffet
То есть slides: будет массивов объектов
Зачем?
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2016, 15:10
Новичок на форуме
Отправить личное сообщение для maxpopov89 Посмотреть профиль Найти все сообщения от maxpopov89
 
Регистрация: 22.08.2016
Сообщений: 5

Мне была бы удобна вот такая структура слайдера:

....
<div id="slayder">
<div id="slayd1"><a href="/st1.php"><img src="./sl1.jpg"></a></div>
<div id="slayd2"><a href="/st2.php"><img src="./sl2.jpg"></a></div>
<div id="slayd3"><a href="/st3.php"><img src="./sl3.jpg"></a></div>
</div>
....

Что бы скрипт листал дивы, тогда с сылками проблем небыло бы. Но как я сказал, в JS я ничего не понимаю, и скрипта с такой структурой я не нашел. Попадались на jquery, но они очень большие, а мне ведь нужно его переделать под мой дизайн сайта, да и плюс как мне показалось, попробовав несколько jquery, страница грузилась дольше. Поэтому я выбрал тот, в нем мало кода и не сложно было переделать стили под себя, но потом возникла необходимость в ссылках!
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2016, 15:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Массив в адресов изображений можно добавить и адрес перехода, то есть:

slides:[[url изображения, url ссылки], [url изображения, url ссылки], ...],

frame:0 - как указывал на индекс в массиве, так и указывает, с той лишь разницей, что на массив в котором два значения. Ссылку установить на родительский контейнер, меняя у нее href по индексу.

Слайдеров так много, от простых до сложных, и здесь на форму не раз подымалось о них, вот буквально недавно. Есть в сети и уроки по созданию слайдеров, можно найти и почитать.
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2016, 15:30
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от laimas
Зачем?
Чтобы не зависеть от индексов. Но поскольку ты любишь зависеть от всякой чешуи, то и другим предлагаешь карцер.
Ответить с цитированием
  #7 (permalink)  
Старый 23.08.2016, 15:32
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от laimas
на массив в котором два значения.
Учи язык. Массив в котором два элемента.
Ответить с цитированием
  #8 (permalink)  
Старый 23.08.2016, 15:39
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от maxpopov89
Что бы скрипт листал дивы
Не знаю как ты искал, этих слайдеров как грязи. Возьми вот этот с топа поиска по js slider http://www.slidesjs.com/ Там как раз как ты хочешь.
Ответить с цитированием
  #9 (permalink)  
Старый 23.08.2016, 15:53
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от warren buffet
Чтобы не зависеть от индексов. Но поскольку ты любишь зависеть от всякой чешуи
Слов нет, так и прет из тебя дерьмо.
Ответить с цитированием
  #10 (permalink)  
Старый 24.08.2016, 00:45
Новичок на форуме
Отправить личное сообщение для maxpopov89 Посмотреть профиль Найти все сообщения от maxpopov89
 
Регистрация: 22.08.2016
Сообщений: 5

Что то я не особо допер.. Каким образом этот массив будет работать, если скрипт подставляет адрес картинки в background-image таблицы стилей?!
Было бы хорошо, если бы скрипт брал из массива ссылку и подставлял ее в href html страницы.

<aside>
<div id="scr">
<a href="страница 1"></a>
<div id="bleft" onclick="slider.left();"></div>
<div id="bright" onclick="slider.right();"></div>
</div>
</aside>

Но я так понимаю в скрипте придется много чего дописывать?!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Внутри разворачивающегося по клику DIVа не работают ссылки JavaScriptNoob Элементы интерфейса 2 17.11.2015 00:01
Как открыть все сгенерированные ссылки с общим id в списке одним кликом? malefikus13 Общие вопросы Javascript 12 22.07.2015 08:52
В слайдере не работают ссылки EZhizn Элементы интерфейса 5 30.03.2015 09:01
Ссылки внутри другой ссылки Madgeniy Events/DOM/Window 4 11.08.2012 14:58
ссылки получали стиль "visited" только на время сессии alexandr_poskrobka Серверные языки и технологии 7 10.03.2010 08:48