집 > 기사 > 웹 프론트엔드 > 모바일 h5 캐러셀 플러그인 스와이프 예시에 대한 자세한 설명

모바일 h5 캐러셀 플러그인 스와이프 예시에 대한 자세한 설명

小云云원래의: 2018-01-29 13:42:384400검색

swipe.js는 경량 js 터치 슬라이딩 라이브러리인 Swipe JS입니다. 이것은 매우 작은 자바스크립트 클래스 라이브러리이지만 그 기능은 간단하지 않습니다. 웹 페이지에 모든 콘텐츠를 표시하는 데 사용할 수 있고 정밀한 터치 이동 작업을 지원하며 자동 재생, 비례 배율 등을 설정할 수도 있습니다. .

모바일 h5 페이지에서는 캐러셀 이미지가 필요한 경우가 많습니다. 너무 많은 효과가 필요하지 않고 간단한 손가락 슬라이딩 및 자동 회전 효과만 있으면 스와이프 플러그인을 선호하지만 이는 Baidu 검색에서 찾았습니다. 플러그인 설명이 완전하지 않습니다. 필요할 수 있는 몇 가지 기능을 추가하겠습니다.

Swipe 기능 소개

Swipe JS 사용 방법은 다음과 같습니다. Swipe에는 다음과 같은 매개변수가 있습니다.

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。

또한 다음과 같이 더 일반적으로 사용되는 API 메서드가 있습니다.

prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

Swipe 사용 방법

After 기본적인 함수 방식을 이해한 후, 어떻게 사용하는지 살펴보겠습니다.

먼저 HTML 구조:

<p id="slider" class="swipe">
  <p class="swipe-wrap">
    <p></p>
    <p></p>
    <p></p>
  </p>
</p>

그 다음 스타일 코드:

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > figure {
    float: left;
    width: 100%;
    position: relative;
}

마지막으로 JS 바인딩 및 매개변수 설정:

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

여기서 위에 소개된 함수 매개변수가 작성되어 있는 한 해당 기능은 다음과 같습니다. 달성 .

마지막으로 슬라이딩 스위치에 위아래 버튼을 추가할 수도 있습니다:

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

또한 몇 가지 페이지네이터 효과를 추가하겠습니다:

그 시점에서 페이징 효과가 필요한 경우 다음과 같은 코드를 추가할 수 있습니다.

nav 태그 부분이 페이징입니다. 브라우저의 관련 부분을 끌어오고 슬라이드 수만큼 li 태그를 갖습니다. (페이지네이터 효과가 필요한 경우 nav 및 ul 태그만 추가하면 됩니다. li 태그는 페이징 지점을 나타내기 때문입니다. 휠을 동적으로 추가하려면 동적으로 생성해야 합니다. Play 모듈!)

<nav>
    <ul id="position">
      <!-- <li class="on"></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li> -->
    </ul>
</nav>

해당 인스턴스화 코드(간단한 작성 방법을 사용하는 어린이 신발은 자체 방법을 사용할 수 있음):

var slider = Swipe(document.getElementById('slider'), {
                    auto: 3000,
                    continuous: true,
                    callback: function(pos) {
                        var i = bullets.length;
                        while (i--) {
                            bullets[i].className = ' ';
                        }
                        bullets[pos].className = 'on';
                    }
                });
var slides = document.querySelectorAll('.swipe-wrap figure').length;
var liBox = document.getElementById('position');
var liTab;
for (var i = 0; i < slides; i++) {
    liTab = document.createElement('li');
    if (i == 0) {
        liTab.className = 'on';
    }
    liBox.appendChild(liTab);
};
var bullets = document.getElementById('position').getElementsByTagName('li');

이 플러그에는 또 다른 핵심 사항이 있습니다. 손가락이 슬라이드 모듈 위로 한 번 미끄러지면 in이 멈추고 더 이상 자동으로 회전하지 않습니다. 이때 swipe.js의 소스 코드를 수정해야 합니다.

이러한 방식으로 이 플러그인은 기본적으로 실행될 수 있습니다. 일반적으로 가장 기본적인 요구 사항을 충족합니다.

모바일 h5 캐러셀 플러그인 스와이프 예시에 대한 자세한 설명

관련 기사