скажи заранее

Я люблю и изучаю фронтенд, и я боролся с этим весь путь. Уже почти год. Я прихожу более или менее каждый день "читать" статьи всех. Я многому научился и многому научился. более крепкий передок братишка мой, на этом узле тоже хочу кое что написать.Это маленькая цель доделать свою.

Последствия и кодовый адрес

Несколько дней назад, когда проект нуждался в этом, я сам создал карусель изображений JavaScript, и я прочитал много статей о JavaScript без использования Jquery, поэтому мне пришла в голову идея написать JavaScript самому, вместо того, чтобы полагаться на передний план. -конечные приложения, такие как Jquery, карусель изображений.
Так уж получилось, что подобной статьи на Наггетс не нашел, так что восполню пробел,Портал карусели изображений JavaScript IE9+, адрес ссылки находится на том же Nuggets несколько дней назад. Я разместил и поделился своим собственным демо-адресом Github. Поскольку я только что упаковал эту карусель изображений, мне не терпится поделиться ею с вами, поэтому статья перешла прямо к ней. не написав. Теперь, когда я думаю об этом, я все еще чувствую необходимость что-то написать.

Требования и результаты

Дизайн, созданный красивой, нежной и щедрой дамой пользовательского интерфейса, похож на карусель, показанную ниже.Белый кружок на сером фоне - это положение индексной полосы изображения.Количество точек и количество изображений карусели можно для просмотра в белой части.Это область отображения изображения, а серая нижняя часть на самом деле прозрачна, и можно увидеть только белый круг.Чтобы изображение не было также белым фоном, белый круг также должен быть дополнен серой рамкой.

Итак, давайте посмотрим на фактический эффект

Внимательно вы можете обнаружить, что функциональные точки следующие

1. Автоматическая прокрутка карусели
2. Поддержка перетаскивания и прокрутки
3. Указательный щелчок для прокрутки
4. Переход по гиперссылке на изображение (этого не видно, но я его добавил)
5. Эффект переключения (рассматривается как скрытое фиксированное требование)

Обсудить несколько идей

идея прототип 1

Как правило, прототип дизайна изображения карусели, который я вижу, состоит в том, чтобы расположить все изображения линейно, использовать поле слева или положение + слева и другие методы управления, изменяя значение смещения всего или каждого отдельного элемента (поле слева или слева на Реализовать прокрутку и переключение) для реализации прокрутки, но при смещении,Общая структура узла не изменится, как показано на следующих разноцветных значках,Черный каркас — это то место, где глаза пользователя действительно могут видеть, для этого в начальном состоянии будут генерироваться все цветовые блоки элементов, а при прокрутке менятьЗагрузите цветовой блок целикомСмещение коэффициента схемы измененокаждый цветовой блокСхема смещения лучше, потому что последняя схема имеет больше объектов, управляемых js, когда цветовых блоков больше, и потребление производительности будет выше.

Мой прототип идеи

Я использую 3 цветных блока для загрузки картинки, похоже на револьвер, у меня всего 3 боезапаса, каждый раз я хочу посмотреть какая картинка будет загружена, изначально позиция "2" загружает первую картинку, позиция "3" Загрузка второе изображение, позиция "1", чтобы загрузить последнее изображение

После смещения воспроизводится узел в направлении смещения, клип прокручивается и добавляются новые узлы, как показано на рисунке ниже. В это время содержимое в позиции «1» загружается со следующим изображением после изображение в позиции "3". Смещение для загрузки предыдущего изображения, если изображение исчерпано, первое изображение или последнее изображение будут размещены в соответствии с направлением прокрутки изображения.

И я сделал выбор из приведенного выше прототипа персональной карусели на основе карусели.перетаскиваемое взаимодействие+бесшовная петляПрокрутите идеи, следуйтеидея прототип 1, при прокрутке на первой и последней позициях необходимо откатиться, чтобы добраться до другой стороны.Конечно, есть улучшенные методы, которых тоже можно добитьсяидея прототип 1избесшовная петляПрокрутка, но вам нужно выполнять объектные операции на каждом узле цветового блока. Чем больше цветных блоков, тем легче будет производительность. Однако, если карусели не нужно поддерживать перетаскивание, то,идея прототип 1Это хорошая реализация.

Код

Эта часть контента, если вы хотите узнать больше, перейдите к ней напрямую, я написал ее сам, я хотел бы дать ее звезде, студентам, которые плохо говорят по-английски, пожалуйста, используйте Chrome, чтобы щелкнуть правой кнопкой мыши, чтобы перевести китайский язык
Портал карусели изображений JavaScript IE9+
Код в основном

1. Инициализируйте контейнер, привяжите событие прокрутки (должно быть делегированным прослушивателем событий!!!), загрузите содержимое и запустите прокрутку по времени.
2. Запускается событие перетаскивания, предварительно определяется время, оценивается направление события перетаскивания и оценивается ли прокрутка.
3. При прокрутке используйте смещение 2 объектов js, добавьте переход преобразования css для достижения эффекта, затем удалите невидимый объект js, добавьте узел js с другой стороны и оцените, нужно ли начинать текущий индекс изображения. или закончить с начала Начать заново и загрузить изображения, поменять точки индекса,

Внезапно несколько вопросов

1. Зачем использовать делегированные события
2. Таймер 5S в JS должен быть на 5 секунд друг от друга?

Кроме того, эффект переключения CSS точки индекса полностью реализован на основе преобразования + ширины + влево CSS, а также вдохновлен младшим братом наших больших самородков —Невероятная чистая панель навигации CSS, подчеркивающая эффект следования.

Суммировать

Эта карусель изображений JavaScript
Давайте сначала поговорим о недостатках, совместимость общая, для этого нужен IE9+, и мобильный телефон должен быть в порядке, но я не проверял его, и объект-узел карусели всегда нужно манипулировать при прокрутке. такая карусель картинок действительно да... все равно производительностью надо жертвовать.тем более что при нажатии на индексную точку для переключения будут пробелы в быстром переключении изображений, которые не соседствуют (нажимайте другие переключатели в схема коммутации), а иногда она будет очень большой и вызовет головную боль. , упс, все равно все довольны, мы не будем ее оптимизировать на данном этапе.
Преимущества... это удобно... это нормально... это так интересно, хорошо, напишите это первым. хехе :P