Добавление элементов управления навигацией в галерею слайдов с использованием только JavaScript

Question

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

Теперь я добавил элементы управления навигацией, но яне совсем уверен, как подключить его, чтобы, если вы щелкнете по следующему / предыдущему, он пролистал миниатюру и выделил тот, на котором вы находитесь.

Код слишком длинный для вставки, но вот скрипка:

http://jsfiddle.net/calebo/QuXYV/

ps: только JavaScript, без jQuery.

Answer 1

Я переделал ваш код и получил его здесь . Я бы порекомендовал немного реорганизовать ваш код, чтобы очистить его. Я бы сказал, создать массив объектов, которые содержат URL-адрес изображения и подпись:

var objArray, obj;
for(var i = 0 ....) {
    obj = {
        url : "http://foobar.com/foo.png",
        caption : "Caption"
    };
    objArray.push(obj);
}
// then index with
var currObj = objArray[current];  // where 'current' is the variable you are using for state

По сути, я переместил часть кода из bindImage в функцию с именем set (вы, вероятно, захотите переименовать это). Я также прокомментировал строку, где вы удалите ссылку якоря.

Answer 2

Я приведу пример слайдера, на котором вы можете основать свое решение (или, возможно, даже изменить).

Пример ( JSFiddle ) представляет собой ползунок, который перемещает <div> элементов влево и вправо, но вы можете увидеть, как выполняется привязка события click.

Надеюсь, это поможет. Не стесняйтесь задавать дополнительные вопросы.