Ссылки в слайдере
 

Здравствуйте!
Возникла проблема. Имеется слайдер с автопролистыванием и кнопками навигации в лева/права, в полне себе устраивает. Появилась необходимость по щелчку на слайд, переходить на соответствующую данному слайду страницу. С 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);
};

Что нужно дописать, и возможно ли (при том что слады ставятся ставятся как фон блока), что бы при клике на слайд, переходить на соответствующую ему страницу?

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

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

Зачем?

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

....
<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, страница грузилась дольше. Поэтому я выбрал тот, в нем мало кода и не сложно было переделать стили под себя, но потом возникла необходимость в ссылках!

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

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

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

Слайдеров так много, от простых до сложных, и здесь на форму не раз подымалось о них, вот буквально недавно. Есть в сети и уроки по созданию слайдеров, можно найти и почитать.

Чтобы не зависеть от индексов. Но поскольку ты любишь зависеть от всякой чешуи, то и другим предлагаешь карцер.

Учи язык. Массив в котором два элемента.

Не знаю как ты искал, этих слайдеров как грязи. Возьми вот этот с топа поиска по js slider http://www.slidesjs.com/ Там как раз как ты хочешь.

Слов нет, так и прет из тебя дерьмо.

Что то я не особо допер.. Каким образом этот массив будет работать, если скрипт подставляет адрес картинки в 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 id="scr">, а значение берется из массива по индексу указанному в frame. Но переход будет в таком случае и по щелчку на кнопках навигации. Самое простое решение, это перенести их в aside.

<script> 
var slider = {
    slides : [['build.jpg','url1'],['service.jpg', 'url2'],['modern.jpg','url3'],['support.jpg','url4']],
    frame:0, // текущий кадр для отображения - индекс картинки из массива
    set: function() { // установка нужного фона слайдеру
        var o = document.getElementById("scr");
        o.style.backgroundImage = "url("+this.slides[this.frame][0]+")";
        o.parentNode.href = this.slides[this.frame][1];
    },
    init: function() { // запуск слайдера с картинкой с нулевым индексом
        this.set();
    },
    left: function() { // крутим на один кадр влево
        this.frame = !this.frame ? this.slides.length-1 : this.frame - 1;
        this.set();
    },
    right: function() { // крутим на один кадр вправо
        this.frame = this.frame == this.slides.length-1 ? 0 : this.frame + 1;
        this.set();
    }
};

//.....
</script>     
</head> 

<body>
<aside>
    <a href="">
        <div id="scr"></div>
    </a>
    <div id="bleft" onclick="slider.left()">PREV</div>
    <div id="bright" onclick="slider.right()">NEXT</div>
</aside>

Можно менять и url страницы, но для этого нужно установить обработчик щелчка по "scr", в котором и указывать переход на slider.slides[slider.frame][1].

В ссылку должен быть обернут <div id="scr">
 

Спасибо большое! Все получилось, работает!)

Я бы не стал так радоваться. ) Если писать слайдер как плагин, то массив описывающий слайды уж точно не должен быть в объекте, его нужно передавать плагину. Иначе придется постоянно лезть в код плагина для правок.

Если я правильно понимаю определение плагина, то я не планировал слайдер писать как плагин. Лезть я в него больше не буду, изображения там тоже меняться не будут, по крайней мере в ближайшее время.

А ближайшее время как и зима, пришло нежданно. :)
Да бог с ним, пусть не на плагин вы нацелились и даже ООП в перспективе не намечается. Пусть чисто процедурный подход, все равно, такие вещи как входные параметры - список файлов/адресов/etc, объект который есть контейнер слайдера, нужно передавать в процедуру. Пусть даже чисто теоретически - есть конфликт, сменили id или пришлось использовать класс, уже придется влезать в процедуру.
Собственно и в вашем слайдере не так сложно получить параметры извне, а чтобы вообще не лезть в код слайдера уж точно длительное время, сделать и добавление контейнеру слайдера необходимой "обвязки".

При чем тут подход. Легче легкого захотеть два или больше слайдера. И тогда придется размножать их коды, а не передавать данные на входы.

Хоть дюжину, если слайдер один и тот же, то "размножать код" его не требуется. Найдите все таки в сети уроки по созданию слайдера, ей богу будет полезно.