Переключение списка изображений

@Fagoth · Регистрация: 31.03.2015

Студворк — интернет-сервис помощи студентам

Добрый день!
Ребятки подскажите пожалуйста, есть список изображений и класс active необходимо по клику перейти на следующее изображение и переменить к нему класс active , а с предыдущего соответственно убрать. Нужно на чистом ЖС, а то логику понимаю - толку пока что 0!

HTML5
1
2
3
4
5
6
7
8
9
10
                                                    <div>
                                <ul  class="slider">
                                    <li><img class="img_pos active_i" src="_image/donald.png"></li>
                                    <li><img class="img_pos" src="_image/mickey.png"></li>
                                    <li><img class="img_pos" src="_image/donald.png"></li>
                                    <li><img class="img_pos" src="_image/donald.png"></li>
                                    <li><img class="img_pos" src="_image/donald.png"></li>
                                </ul>
                                    <button class="next" onclick="next();" >Next</button>
                            </div>

@kalabuni · 03.08.2016, 20:02

Сообщение от Fagoth

логику понимаю

а я, увы, вашу логику -- не очень понимаю

в тексте пишете, что надо применить класс active к следующему изображению, и убрать этот класс у предыдущего

а в коде у вас у первого изображения установлен класс active_i, но не active
так вот, непонятно -- какое имя класса устанавливать и убирать: active или active_i?

ну и, вы не упомянули -- какое следующее изображение делать активным, когда текущее активное будет последним в списке?
догадываюсь, что самое первое, но лучше всё же уточнить (а то вдруг у вас опять какие-то "андескоп" и "и с точкой" в уме заложены)

по поводу алгоритма -- всё просто: функция находит текущий элемент с нужным именем класса, удаляет это имя класса, затем берёт следующий по очереди элемент (через nextSibling) и присваивает ему нужное имя класса, при этом, если текущий элемент является lastChild'ом, то следующим будет firstChild

@kalabuni · 04.08.2016, 00:53

----------------------

@Fedor Vlasenko · 04.08.2016, 01:15

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var images = document.querySelectorAll('.img_pos'),
  slider = next(images);
 
function next(arr) {
  var max = arr.length - 1,
    i = 0;
  return function() {
    i = i < max ? i + 1 : 0;
    return arr[i];
  };
}
document.getElementById('next').onclick = function() {
  var len = images.length;
  while (len--) images[len].className = 'img_pos';
  slider().className += ' active';
}

Песочница

@Fagoth · 05.08.2016, 13:41 **[ТС]**

Fedor!

Можно пару вопросиков по теме. Я сделал кнопку Prev она работает не совсем корректно, проходит один раз по массиву и останавливается на первом элементе я не могу понять какое равенство поставить в тернарный оператор.

function prev(arr) {
var max = 0;
i = arr.length -1;
return function() {
i = i < max ? i + 1 : i;
return arr[i--];
};
};

-Хочу отслеживать текущее положение элемента с классом active и от негоь листать дальше, а не начинать с того на котором остановился. Если нажать сначала Next , а потом Prev то следующий некст будет начинаться со 2 элемента , а не с текщего

Такая функция получилась
function imgPos() {
active = document.querySelectorAll(".active");
console.log(active)
}

indexOf у меня не получилось подключить все время ошибку выдает.

@Fedor Vlasenko · 05.08.2016, 21:25

про Prev в вашем сообщении слова не было
затем захотите play, pause
вот код разбирайтесь

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function nav(arr) {
    var current = 0, len = arr.length - 1;
    this.next = function () {
        current =  current < len ? current + 1 : 0;
        return arr[current];
    };
    this.prev = function () {
        current = current > 0 ? current - 1 : len;
        return arr[ current];
    };
}

используем

JavaScript
1
slider.next().className += ' active';

и

JavaScript
1
slider.prev().className += ' active';

песочница

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

Переключение списка изображений

Решение

Решение

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	04.08.2016, 00:53
	---------------------- 0

@Fagoth 0 / 0 / 0 Регистрация: 31.03.2015 Сообщений: 10
	05.08.2016, 13:41 [ТС]
	Fedor! Можно пару вопросиков по теме. Я сделал кнопку Prev она работает не совсем корректно, проходит один раз по массиву и останавливается на первом элементе я не могу понять какое равенство поставить в тернарный оператор. function prev(arr) { var max = 0; i = arr.length -1; return function() { i = i < max ? i + 1 : i; return arr[i--]; }; }; -Хочу отслеживать текущее положение элемента с классом active и от негоь листать дальше, а не начинать с того на котором остановился. Если нажать сначала Next , а потом Prev то следующий некст будет начинаться со 2 элемента , а не с текщего Такая функция получилась function imgPos() { active = document.querySelectorAll(".active"); console.log(active) } indexOf у меня не получилось подключить все время ошибку выдает. 0