22.08.2016, 20:22
|
Новичок на форуме
|
|
Регистрация: 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);
};
Что нужно дописать, и возможно ли (при том что слады ставятся ставятся как фон блока), что бы при клике на слайд, переходить на соответствующую ему страницу?
|
|
23.08.2016, 07:31
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Сообщение от maxpopov89
|
переходить на соответствующую ему страницу?
|
Сначала соответствия представь, или откуда брать адрес страницы соответствующий картинке?
То есть slides: будет массивов объектов, а значит методы слайдера придется переписывать.
Последний раз редактировалось warren buffet, 23.08.2016 в 07:37.
|
|
23.08.2016, 13:26
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от warren buffet
|
То есть slides: будет массивов объектов
|
Зачем?
|
|
23.08.2016, 15:10
|
Новичок на форуме
|
|
Регистрация: 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, страница грузилась дольше. Поэтому я выбрал тот, в нем мало кода и не сложно было переделать стили под себя, но потом возникла необходимость в ссылках!
|
|
23.08.2016, 15:18
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Массив в адресов изображений можно добавить и адрес перехода, то есть:
slides:[[url изображения, url ссылки], [url изображения, url ссылки], ...],
frame:0 - как указывал на индекс в массиве, так и указывает, с той лишь разницей, что на массив в котором два значения. Ссылку установить на родительский контейнер, меняя у нее href по индексу.
Слайдеров так много, от простых до сложных, и здесь на форму не раз подымалось о них, вот буквально недавно. Есть в сети и уроки по созданию слайдеров, можно найти и почитать.
|
|
23.08.2016, 15:30
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Сообщение от laimas
|
Зачем?
|
Чтобы не зависеть от индексов. Но поскольку ты любишь зависеть от всякой чешуи, то и другим предлагаешь карцер.
|
|
23.08.2016, 15:32
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Сообщение от laimas
|
на массив в котором два значения.
|
Учи язык. Массив в котором два элемента.
|
|
23.08.2016, 15:39
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Сообщение от maxpopov89
|
Что бы скрипт листал дивы
|
Не знаю как ты искал, этих слайдеров как грязи. Возьми вот этот с топа поиска по js slider http://www.slidesjs.com/ Там как раз как ты хочешь.
|
|
23.08.2016, 15:53
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от warren buffet
|
Чтобы не зависеть от индексов. Но поскольку ты любишь зависеть от всякой чешуи
|
Слов нет, так и прет из тебя дерьмо.
|
|
24.08.2016, 00:45
|
Новичок на форуме
|
|
Регистрация: 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>
Но я так понимаю в скрипте придется много чего дописывать?!
|
|
|
|