Я сам написал три карусели с изображением. Один реализован в простом нативном JS и не имеет эффектов анимации. Другой реализован в сочетании с jQuery и переключается на и выходу. Теперь я хочу сделать более прохладную на своем блоге или на личном веб -сайте, и я могу отображать свои собственные работы в то время. Через некоторое время по магазинам в MOOC я обнаружил, что был курс плагин-модуля JQUERY, который был немного крутым, поэтому я подумал о том, чтобы инкапсулировать его в Native JS. Только после того, как я сделал это, это было не так просто, как я думал. Полем Полем Давайте больше не будем говорить об этом, давайте объясним процесс реализации.
2. Эффект
Потому что мой сервер еще не был установлен. Там нет онлайн -демонстрации (orz ...), поэтому я могу только поместить рендеринг.
Приблизительный эффект все еще можно увидеть на фотографиях, поэтому я не скажу много. Если вы хотите увидеть реальный кодовый эффект, добро пожаловать в мой код загрузки GitHub. Не забудьте дать мне звезду в моем проекте GitHub^_^
Iii. Процесс реализации
HTML -структура
<div Data-setting = '{"width": 1000, "высота": 400, "carrouselwidth": 750, "carrouselelheight": 400, "Scale": 0,9, "VerticalAlign": "Middle"}'> <div> </div> <ul> <li> <a href = "#"> <img src = "/img/1. </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "/lipg"/li <li> <a href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> </ul> <div> </div> </div>Эта структура такая же, как и структура кода HTML общих каруселей. Небольшая разница состоит в том, что на основном Div-карусели существует свойство, которое содержит некоторые параметры эффектов карусели. Конкретное значение параметров будет объяснено позже.
Код для части CSS не будет опубликован. Самое главное - обратить внимание на абсолютное расположение элементов. Как видно из визуализации, положение и размер каждого изображения различны, поэтому они контролируются через JS, поэтому требуется абсолютное позиционирование. Давайте сосредоточимся на процессе реализации JS.
Процесс реализации JS
Давайте поговорим о нескольких ключевых шагах в JS. После выполнения этих шагов не должно быть никаких трудностей.
①default Параметры
Поскольку это плагин с пакетом, определенно будут некоторые значения по умолчанию для параметров, которые необходимо настроить. В этом плагине следующие параметры в основном:
Ширина: 1000, // ширина области слайда
Высота: 400, // высота площади слайда
CarrouselWidth: 700, // Ширина первого кадра слайда
Carrouselheight: 400, // высота первого кадра слайда
Масштаб: 0,9, // Записывают масштабные отношения, например, сколько ширины и высоты второго изображения меньше, чем у первой картинки при отображении.
Autoplay: True, // Это автоматически играет?
Timesspan: 3000, // интервал времени игры в автоматической игре
VerticalAlign: 'Middle' // Выравнивание изображений, есть три способа: Top/Middle/Note, по умолчанию - средняя
②encapsulate объект
Поскольку веб-сайт может использовать один и тот же плагин Carousel в нескольких местах, упаковка имеет решающее значение. После определения этого объекта, если вы определите метод инициализации для объекта, вы можете создать несколько объектов. Вам просто нужно пройти один и тот же DOM из всех классов в нем. Итак, мой метод инициализации заключается в следующем:
Carousel.init = function (carrosels) {var _this = this; // конвертировать Nodelist в массив var cals = toarray (carrosels); <br> /*Потому что Native JS получает все классы, то, что вы получаете, - это Nodelist, который является массивом классов. Если вы хотите использовать метод массива, вам нужно преобразовать его в настоящий массив. Здесь Toarray - это метод преобразования. */ cals.foreach (function (item, index, array) {new _this (item);}); }Таким образом, когда я нахожусь в Window.onload, я называю carrousel.init (document.queryselectorall ('. Carrousel-main')); Таким образом, я могу создать несколько каруселей!
③initialize параметры позиции первого кадра
Поскольку соответствующие параметры всех кадров после первого кадра определены со ссылкой на первый кадр, важно определить первое кадр.
setValue: function () {this.carrousel.style.width = this.settings.width+'px'; this.carrousel.style.height = this.settings.height+'px'; /*Настройки левой и левой кнопки, здесь область после левой и правой кнопки вычитается из ширины первого кадра. Z-индекс выше, чем у всех изображений, кроме первого кадра, и изображения просто размещены влево и вправо, поэтому значение Z-индекса составляет половину количества изображений. */ var btnw = (this.settings.width-this.settings.carrouselwidth)/ 2; this.prebtn.style.width = btnw+'px'; this.prebtn.style.height = this.settings.height+'px'; this.prebtn.style.zindex = math.ceil (this.carrouseLitems.length/2); this.nextbtn.style.width = btnw+'px'; this.nextbtn.style.height = this.settings.height+'px'; this.nextbtn.style.zindex = math.ceil (this.carrouseLitems.length/2); // Первые настройки, связанные с кадром this.carrouselfir.style.left = btnw+'px'; this.carrouselfir.style.top = this.setCarrouseLalign (this.settings.carrouseLheight)+'px'; this.carrouselfir.style.width = this.settings.carrouselwidth+'px'; this.carrouselfir.style.height = this.settings.carrouseLheight+'px'; this.carrouselfir.style.zindex = math.floor (this.carrouseLitems.length/2);},Здесь, когда используется новый объект, перейдите в узел DOM, чтобы получить параметры сбора данных, а затем обновить конфигурацию параметра по умолчанию. Здесь есть место, где нужно отметить. Вы не можете напрямую обновлять параметры по умолчанию, присваивая значения при получении параметров, потому что, когда пользователи настраивают параметры, все параметры могут не настраивать один раз. Если значение назначено напрямую, а пользователь настроен, параметры будут потеряны. Здесь я написал метод расширения объекта, аналогичный методу $ .extend в jQuery для обновления параметров. Я не буду перечислять данные, если вам интересно, вы можете скачать их.
④ Другие настройки расположения изображения
Картинка здесь на самом деле представляет собой изображение, за исключением того, что первое разделено на два левого и правого изображения, а положение изображения слева и справа отличается, поэтому ее необходимо настроить отдельно:
// Установить позиционную связь изображения на правом var rightIndex = level; rightslice.foreach (функция (элемент, индекс, массив) {rightindex--; var i = index; rw = rw*carrouselself.settings.scale; // картина справа постепенно меньше в соответствии с коэффициентом масштаба rh = rh*carrouseLs.sex.s.sex. Z-индекс справа меньше, и количество изображений может быть постепенно уменьшено, используя общее количество изображений. // Метод расчета зазора здесь: вычтите первую ширину кадра, раздел 2, а затем разделите количество изображений на левом или правом элементе. STYLE.LEFT = (Constoffset+(++ Index)*GAP-RW)+'PX'; // Значение левого на самом деле является левой частью первого кадра+ширина первого кадра+расстояние между элементом. item.style.top = carrouselself.setCarrouseLalign (rh)+'px';});Метод настройки слева похож и проще, поэтому я не буду вдаваться в подробности.
⑤ Отрегулируйте размер положения всех изображений во время вращения
Этот шаг очень важен. Нажатие следующего на правой кнопке - левое вращение, а нажимать предыдущий на левой кнопке - правое вращение. В настоящее время нам нужно только рассматривать все изображения как кольцо, нажмите один раз, изменить положение и завершить вращение. В частности, когда левое вращение поворачивается, сделайте параметры второго изображения, равным первой картине, третье изображение, равное второму изображению ... и последнее изображение, равное первой картине. При вращении справа сделайте параметр первой картины равным вторым изображениям, параметр второго изображения, равный третьему изображению ... и параметр последнего изображения, равный первой картине.
Поговорим здесь о левой ротации здесь
if (dir == 'left') {toarray (this.carrouseLitems) .foreach (function (item, index, array) {var pre; if (index == 0) {// судить, является ли это первым pre = _this.carrousellat; // Сохранить первый предварительный равни zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture refers первым изображением; item.style.width = ширина+'px'; function_this.rotateflag = true;Вращение здесь будет казаться жестким, если вы не используете немного анимации. Но Native JS не имеет анимированных функций, здесь я сам написал имитированную анимационную функцию. Принцип состоит в том, чтобы получить исходное значение стиля DOM и сравнить его с недавно переданным значением. Используйте некоторые методы для определения скорости. Моя скорость здесь состоит в том, чтобы разделить разницу в 18. Однако определить таймер и ссылаться на интервал времени в исходном коде jQuery, чтобы выполнять каждые 13 миллисекунд. Затем таймер очевиден каждый раз, когда значение исходного стиля добавляется к входящему значению. Для получения подробной информации, пожалуйста, смотрите здесь.
Хорошо, ключевые моменты почти одинаковы, и это должно быть легко, если вы понимаете эти процессы!
4. Резюме и размышления
Суммировать:
Я лично думаю, что это относительно простой для понимания плагин. Было бы довольно просто сделать это в сочетании с jQuery. Однако, если вы пишете из оригинала, вы все равно чувствуете себя немного менее плавным. Должно быть, пользовательские анимации не так хороши, как анимации, инкапсулированные JQUERY.
Кроме того, поскольку изображения необходимо разделить одинаково с обеих сторон левой и правой стороны, для четных чисел изображений используемый здесь метод предназначен для клонирования первого изображения, затем добавить его к концу и сформировать нечетное число.
думать:
Если есть ошибка, это означает, что я определяю флаг Rotateflag, чтобы определить, может ли он вращаться в данный момент, который не позволяет вам идти в ногу с быстрым щелчком. Когда я нажимал, я установил rotateflag на false, а затем установил Rotateflag на True после окончания анимации, но кажется, что эффект не очевиден. Я надеюсь, что соответствующие мастера могут дать мне несколько советов, и все будут добиваться прогресса вместе.
Вышеуказанное - все содержание этой статьи. Для получения дополнительного содержания, пожалуйста, см. Сводка эффектов карусели с изображением JavaScript. Спасибо за чтение.