Как использовать H5 для реализации примера ротора сенсорного экрана

В начале передней части поделитесь процессом реализации сенсорного экранного каркаса на мобильном телефоне.

1. Сколение цикла поддержки

2. Ширина может быть установлена ​​произвольно, нет необходимости ширины с экраном

3. Страница может катиться вертикально

4. Вы можете установить переключение элементов мониторинга восстановления

5. Pure JS, не используйте никакой сторонней библиотеки

1. Предположим, что ширина субэлемента .ITEM составляет 375px, используя абсолютное позиционирование, чтобы поместить все субэлементы в родительский элемент

2. Установите ширину родительского элемента. Карусель на 375px, которая совпадает с подразделением.

3. Добавить события прикосновения к родительскому элементу. Карусель: TouchStart, Touchmove, Touchend

4. Когда вы нажимаете пальцем, сохраните начальную позицию (ClientX)

5. При скольжении пальцев судите направление скольжения по расстоянию скольжения:

① Сдвиньте палец влево и одновременно перемещайте элементы на правой стороне текущего элемента и текущего элемента

② Прычите пальцами вправо и перемещайте элементы на левую сторону текущих и текущих элементов одновременно

6. Когда ваши пальцы поднимаются, определите, перейти ли на следующую страницу, расстояние скольжения

① Расстояние движения не превышает 50%от ширины субэлемента и откатается обратно текущей странице в начальную позицию без переключения текущего элемента.

② Расстояние движения превышает 50%ширины дочернего элемента, а ток -элемент переключается на следующий элемент.

③ Установите свойство преобразования текущего элемента для перевода3d (0px, 0px, 0px) и

④ Установите атрибут преобразования следующего дочернего элемента в Transtate3d (375px, 0px, 0px)

⑤ Установите атрибут преобразования предыдущего дочернего элемента в Transtate3d (-375px, 0px, 0px) и атрибут z-index +1

⑥ Установите свойство Z-Index всех других подэлементов на значение по умолчанию

7. Первым элементом первого дочернего элемента является последний элемент, а следующим элементом последнего элемента является первый элемент, который реализован в списке круговых связей.

При перемещении установите свойство преобразования дочернего элемента .item, а не родительский элемент.

HTML & CSS

 // html <div class = carousel ontouchstart => <div class = fourene: #3b76c0> </h3> </div> </div> <div class = itemle = backgr ound: #58c03b;> <h3> item- 2 </h3> </div> <div class = item Style = fourene: #c03b25;> <h3> item-3 </h3> </div> <div class = founge: #e0a718;> <h3> item -4 </h3> </div> <div class = item Style = founke: #c03eac;> <h3> item-5 </h3> </div> </div>

 //CSS.

Младший

Установить начальное состояние

Сначала реализуйте двухзащитный связанный список, чтобы поддерживать элементы в компоненте вращения.

 Функция (Data) {this.data = data; Head = null; ante = heald;} else {this.head.prev = node; Node .index = _nodes.length;

После получения связанного списка создайте связанный пример, добавьте подраздел в связанный список и установите некоторые начальные состояния

 var _container = document.queryselector (. + Containerclass); i ++) {list.append (new Node (_items [i]);} var _prev = null; Zar _activezindex = _normalzindex + 1; Элементы, чтобы добавить 1

Когда вы нажимаете пальцем, сохраните начальную позицию

 _Container.addeventListener (touchStart, function (e) {// e.preventDefault (); // Аннотация этой строки кода предотвратит вертикально в элементе. пальцы strict = touch.clienty;

Сдвиньте пальцы на экране и переместите пальцы на странице

 _Container.addeventListener (touchmove, function (e) {// e.preventDefault (); // Аннотация этого кода линии предотвратит страницу в элементе от вертикально. Палец скользит в направлении x var deltay = touch.clienty -starty; быть влево и вправо. его левые и правые элементы одновременно перемещаются (перевод);

Когда ваш палец покинет экран, расчет, наконец, останется на какой странице

 _Container.addeventListener (touchend, function (e) {// e.preventDefault (); // Отмена кода этой строки предотвратит вертикальную прокрутку страницы в элементе // Рассчитайте время, чтобы остаться на экране var Deltat = New Date (). Является ли расстояние, сколько находится расстояние между расстоянием скольжения. чем 50%экрана, вернитесь на предыдущую страницу if (math.abs (transtate)/_itemwidth <0,5) {isrollback = true;} else {// Если расстояние скольжения на 50%больше экрана, скользит к Следующая страница Translate = Translate <0?

Чтобы облегчить использование, я инкапсулировал весь процесс реализации в библиотеку и добавил метод prev (), next (), который очень просто:

 <script src = lib/carousel.js> </script> createcarouseel (carousel, it, true) .bindtouchevent () .setitemchangedHandler (OnPageChanged); // должны ли третий параметр параметров воспроизводить цикл, True играет цикл

Выше всего содержимое этой статьи.