Pous javascript carousel

Я новичок в Javascript, и я пытаюсь сделать простую карусель в чистом Javascript, без каких-либо librairies, таких как JQuery или Bootstrap. Это то, что у меня есть, но порядок изображений неверен, если вы нажмете на следующий, а затем на предыдущий. Что я делаю не так ? https://jsfiddle.net/ddLxvzoj/1/Pous javascript carousel

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Carousel</title> 
    <link rel="stylesheet" href="carousel.css"> 
</head> 
<body onload="init()"> 
<script src="carousel.js"></script> 
<div id="carousel"> 
    <ul> 
     <li><img id="photo" src=""></li> 
    </ul> 
    <a class="arrow left-carousel" href="#" onclick="previous()"> < </a> 
    <a class="arrow right-carousel" href="#" onclick="next()"> > </a> 
</div> 
</body>

var images = ["http://www.rideboard.fr/wp-content/themes/rideboard/images/slidehome/home-06.jpg", "http://www.spotsurf.fr/wp-content/uploads/2013/02/la-graviere-spot-surf.jpg", "http://www.surfsession.com/wp-content/uploads/2013/03/landes_line_up.jpg"]; 
var index = 0; 

function init() { 
    next(); 
} 

function interval(){ 
    setInterval(function(){ 
     next(); 
    }, 2000); 
} 

function next(){ 
    if(index >= images.length) { 
     index = 0; 
    } 
    if(index <= -1){ 
     index = 1; 
    } 
    document.getElementById('photo').src = images[index]; 
    index++; 
} 

function previous(){ 

    if (index <= -1) { 
     index = images.length - 1; 
    } 
    if (index >= images.length) { 
     index = 1; 
    } 
    document.getElementById('photo').src = images[index]; 
    index--; 

}

EDIT: Теперь я пытаюсь добавить «индикатор» на нижней части изображения, чтобы увидеть, на котором изображение вы. Если я нажму на одну кнопку, отобразится правильное изображение. Но я не знаю, как это сделать.

источник

2015-09-12 timp

Почему 'if (index <= -1) index = 1;'? –

Это ошибка, я пробовал другой вариант и забыл ее удалить, спасибо – timp

У вас есть много здесь происходит. Но, похоже, это то, что вы пытаетесь сделать:

1) Загрузите изображение на странице загрузки

2) Когда пользователь нажимает на стрелку вправо, изменить изображение к следующему в массиве , Если мы закончили массив изображений, вернемся к первому, давая иллюзию «карусели»

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

4) Этого я не уверен, но похоже, что вы пытаетесь изменить изображение на следующую каждые две секунды. Это правильно?

Все, что вам действительно нужно сделать, это немного упростить.

Сначала создайте функцию, которая обновит ваше изображение src на основе текущего индекса. (Вы вызвать его из следующей() и предыдущей() функции)

function updateImageSrc(){ 
    document.getElementById('photo').src = images[index]; 
}

Теперь, упростить следующую() и предыдущую() функцию:

function next(){ 
    index++; 
    if(index == images.length) 
     index = 0; 

    updateImageSrc(); 
} 

function previous(){ 
    index--; 
    if(index == -1) 
     index = images.length - 1; 

    updateImageSrc(); 
}

Теперь сделайте функцию инициализации более ясно :

function init(){ 
    //initialize the image 
    index = 0; 
    updateImageSrc(); 

    //set up the auto slideshow dealy 
    setInterval(next, 2000);//no need to wrap "next" inside a function, you can just pass in the reference to the function itself. 
}

Надеюсь, это поможет. Прокомментируйте, если вам нужно дальнейшее направление.

EDIT: Ответ на вопрос плаката в комментариях.

Чтобы добавить ярлык с указанием имени, вам нужно сделать две вещи. 1) Добавьте HTML-элемент, который отобразит имя изображения. 2) в javascript, в любое время, когда изображение изменяется, также измените имя.

1) HTML-элемент для отображения имени:

<span id="image-name-display"></span>

2) обновить его в JavaScript.Я рекомендовал бы модифицировать функцию updateImageSrc() к следующему:

function updateImageSrc(){ 
    document.getElementById('photo').src = images[index]; 

    document.getElementById('image-name-display').textContent = index. 
}

Это будет отображать порядковый номер изображения вы в данный момент. Если вам нужно описание или заголовок для каждого изображения. Вы хотели бы добавить что-то подобное для вашей функции инициализации():

var imageTitles = ['Surfing Malibu', 'The Pipeline', 'Laie at Sunset'];

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

Тогда ваша строка кода в функции updateImageSrc() будет:

document.getElementById('image-name-display').textContent = imageTitles[index];

Есть много различных способов сделать это, но этот способ довольно прост. Надеюсь, поможет.

источник

2015-09-12 22:13:24 cutmancometh

Да, это правильно! Спасибо, он тоже работает, и теперь становится яснее. – timp

Теперь я пытаюсь добавить «индикатор» в нижней части изображения, чтобы увидеть, на каком изображении вы находитесь. Если я нажму на одну кнопку, отобразится правильное изображение. Но я не знаю, как это сделать. Не могли бы вы помочь мне ? Или есть идея? Спасибо – timp

Добавлено редактирование моего ответа, показывающее, как добавить «индикатор». – cutmancometh

Я предлагаю вам альтернативное решение:

function next(){ 
    index++; //We go to the next image 
    fixIndex(index); //We check if we are out of bounds 
    document.getElementById('photo').src = images[index]; //We show that image 
}; 

function previous(){ 
    index--; //We go to the previous image 
    fixIndex(index); //We check if we are out of bounds 
    document.getElementById('photo').src = images[index]; //We show that image 
}; 

/* Fixes "out of bound" indexes */ 
function fixIndex() { 
    if(index >= images.length) 
     index = 0; 
    else if(index < 0) 
     index = images.length - 1; 
};

источник

2015-09-12 21:57:42

Спасибо! он отлично работает! – timp

@timp Это удовольствие! :) –

Pous javascript carousel

ответ

Смежные вопросы