Создание простого слайдера

Question

Как сделать слайдер, один с несколькими фотографиями, с помощью которого вы можете перемещаться со стрелками?

У меня уже есть изображения и стрелки на странице. Должен ли я скрыть все изображения и щелкнуть стрелку, скрыть текущее изображение и отобразить следующее/предыдущее?

У меня есть изображения в списке.

Answer 1

Думаю, вам стоит пойти на это. Сделайте свой собственный, это лучший способ узнать, как все работает. Вот руководство к простой коробке для показа/скрытия со стрелками:

1. Скрыть все изображения с помощью css.
2. Показать только изображение с классом current.
3. Использование JQuery на функции загрузки, чтобы добавить current класса к первому элементу (вы также можете обрабатывать преднагрузку или что-то здесь)
4. на стрелке нажмите присвоить текущее изображение переменного как var current = $('.imgClass.current'), удалить current класс из всех изображений ($('.imgClass').removeClass('current')) и добавьте его в current.next() или .prev(). Если next() или prev() не определено, добавьте его на номер элемента 0 или $('.imgClass').length - 1 соответственно ($('.imgClass').eq(n).addClass('current')).

Answer 2

(function() { 
var t = document.getElementById("sd"), 
    e = document.createElement("img"), 
    n = ["2", "3", "4"], 
    d = 0; 
t.appendChild(e), setInterval(function() { 
    e.setAttribute("src", n[d]), e.style.height = "200px", e.style.width = "470px", d++, d >= n.length && (d = 0) 
}, 1800) 
})(); 

это просто чистый JS слайдер просто сделать DIV по идентификатору (сд) в любом месте в вашей HTML страницы для добавления изменить ваш ЦСИ изображение по п = [ «2», «3», «4»], с вашим пути изображения , как n = ["images/car.jpg", "3.jpg", "4.png"], Также вы можете добавить больше изображения, и вы можете изменить ширину и высота изображения от e.style.height = "200px", e.style.width = "470px"

......... теперь, как можно сделать ползунок мы имеем несколько изображений л ets говорит, что его 5 и все изображение src (path) находилось на одном массиве теперь слайдер показывает одно изображение его первое и для второго показывает его изменение src изображения на второй src на массив, и если он на последнем массиве (последнее изображение на массиве) его обратно к первому элементу (изображение src), и вы можете увидеть код выше :)