Слайдер на JavaScript

242
12 марта 2018, 01:10

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

var images = document.getElementsByClassName("photos");
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var i = 0;

next.addEventListener("click", moveRight);
function moveRight() {
    images[i].style.display = "none";
    images[++i].style.display = "block";
    if(i > images.length)
        i = 0;
}
prev.addEventListener("click", moveLeft);
function moveLeft() {
    images[i].style.display = "none";
    images[--i].style.display = "block";
    if(i == 0)
        i = images.length - 1;
}

Очень прошу помочь!

Answer 1

Попробуйте сделать вот так

var images = document.getElementsByClassName("photos");
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var i = 0;
var length = images.length;

next.addEventListener("click", moveRight);
function moveRight() {
    if(i == length-1){
            images[0].style.display = "block";
            images[i].style.display = "none";
            i = 0;
        } else{
            images[i+1].style.display = "block";
            images[i].style.display = "none";
            i++;
        }
}
prev.addEventListener("click", moveLeft);
function moveLeft() {
    if(i == 0){
        images[length-1].style.display = "block";
        images[i].style.display = "none";
        i = length-1;
    } else{
        images[i-1].style.display = "block";
        images[i].style.display = "none";
        i--;
    }
READ ALSO
reduce в digital_root

reduce в digital_root

Ребята, здравствуйтеДелаю задания на codewars, не могу понять, почему последняя итерация reduce возвращает конкатенацию вместо сложения

211
Как сделать вход с помощью LinkedIn?

Как сделать вход с помощью LinkedIn?

Доброго времени суток, на сайте нужно сделать кнопку входа через LinkedInСделал как тут написано

189
задачка из учебника learn.javascript.ru на тему insertBefore и appendChild

задачка из учебника learn.javascript.ru на тему insertBefore и appendChild

Напишите функцию insertAfter(elem, refElem), которая добавит elem после узла refElemкак я понимаю нужно вставить elem после первого дива на странице(между двух...

177
Помогите допилить скрипт к Google Таблицам используя API

Помогите допилить скрипт к Google Таблицам используя API

Нужно составить книгу заявок биржи в виде Google Таблицы - данные из парсинга распределить по колонкам и строчкам, используя скрипт с Public API биржи

218