집 >웹 프론트엔드 >JS 튜토리얼 >스와이프로 자동 무제한 사진 회전을 구현하는 방법

스와이프로 자동 무제한 사진 회전을 구현하는 방법

php中世界最好的语言원래의: 2018-05-28 14:13:266530검색

이번에는 스와이프로 무제한 자동 사진 회전을 구현하는 방법과 스와이프로 자동 무제한 사진 회전을 구현하기 위한 주의사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

완전한 코드

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" >
 <script src="swiper/js/swiper-3.4.2.min.js"></script>
 <style type="text/css">
  
  .swiper-container {
   width: 900px;
   height: 300px;
  }
 </style>
</head>
<body>
<p class="swiper-container">
 <p class="swiper-wrapper">
  <p class="swiper-slide box1"><img src="img/a.jpg"></p>
  <p class="swiper-slide box2" ><img src="img/b.jpg"></p>
  <p class="swiper-slide box3"><img src="img/c.jpg"></p>
 </p>
 <!-- 如果需要分页器 -->
 <p class="swiper-pagination"></p>
 <!-- 如果需要导航按钮 -->
 <p class="swiper-button-prev"></p>
 <p class="swiper-button-next"></p>
 <!-- 如果需要滚动条 -->
  <!--<p class="swiper-scrollbar"></p>-->
</p>
</p>
<script>
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'horizontal',
  loop: true,
  // 如果需要分页器
  pagination: '.swiper-pagination',
  // 如果需要前进后退按钮
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  autoplay : 1000,
  speed:100,
  // 如果需要滚动条
//   scrollbar: '.swiper-scrollbar',
  effect : 'coverflow',
  slidesPerView: 3,
  centeredSlides: true,
  coverflow: {
   rotate: 30,
   stretch: 10,
   depth: 60,
   modifier: 2,
   slideShadows : true
  }
 })
</script>
</body>
</html>

스와이프를 사용하여 캐러셀 작성하는 방법

캐러셀 사진을 작성하는 과정에서 저도 여러 가지 세세한 부분에 고민을 한 적이 있을 거라 믿습니다. 편리하고 빠른 캐러셀 차트를 알려드려요!

Swiper는 모바일 웹사이트에서 콘텐츠의 터치 슬라이딩에 자주 사용됩니다

1. 첫 번째 단계는 css---swiper.css 플러그인과 JQ---swiper.js 플러그인을 소개하는 것입니다.

그럼 캐러셀 이미지 작성을 시작하세요

<p class="swiper-container">--首先定义一个容器
   <p class="swiper-wrapper">
    <p class="swiper-slide"><img src="" /></p> --添加图片
    <p class="swiper-slide"><img src="" /></p>
    <p class="swiper-slide"><img src="" /></p>
   </p>
   <p class="swiper-pagination"></p>--小圆点分页器
   <p class="swiper-button-prev"></p>--上一页
   <p class="swiper-button-next"></p>--下一页
  </p>

움직이고 싶다면 계속해서 js를 작성하세요

var mySwiper = new Swiper(".swiper-container",{
     autoplay:1000,--每秒中轮播一次
     loop:true,--可以让图片循环轮播
     autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
     pagination:".swiper-pagination",--让小圆点显示
     paginationClickable:true,--实现小圆点点击
     prevButton:".swiper-button-prev",--实现上一页的点击
     nextButton:".swiper-button-next",--实现下一页的点击
　　　　　　　　　　　　effect:"flip"--可以实现3D效果的轮播
    })

Swiper 캐러셀에는 다음과 같은 장점도 있습니다:

　　1. Swiper는 javascript에서 모바일용으로 만든 슬라이딩 특수 효과 플러그인입니다. 휴대폰, 태블릿 및 기타 모바일 단말기.
　　2.Swiper는 터치스크린 초점 이미지, 터치스크린 탭 전환, 터치스크린 다중 이미지 전환 및 기타 일반적인 효과와 같은 일반적인 효과를 얻을 수 있습니다.
　　3. Swiper는 무료이고 안정적이며 사용하기 쉽고 강력한 오픈 소스입니다. 모바일 터미널 웹사이트를 구축하는 데 중요한 선택입니다!

단점도 있습니다: (Swiper 캐러셀 플러그인 ajax 요청을 사용하여 사진을 로드할 때 문제가 미끄러질 수 없습니다.)
배너 사진이 동적으로 생성되기 때문에 플러그인이 초기화되기 시작하면 사진이 없습니다. 문서 흐름에서는 생성되지 않기 때문에 너비에 따라 js 로딩 순서를 조정해도 여전히 문제가 해결되지 않습니다.
드디어 swiper 플러그인 API를 찾았습니다. 콘텐츠 변경에 따라 자동으로 플러그인을 초기화할 수 있는 속성이 있습니다. 관찰자를 추가한 후: true, 문제가 해결되었습니다.

var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

Swiper에는 풍부한 API 인터페이스가 있습니다. (하지만 중국어 문서가 많지 않아 찾을 수 없었습니다.) 이를 통해 개발자는 자신만의 고유한 페이지 매김, 위아래 슬라이더 버튼

및 4개의 콜백 함수: 1.onTouchStart
　　　 2.onTouchMove
를 생성할 수 있습니다. 3.onTouchEnd
　　　　 4.onSlideSwitch.
위 내용은 제 개인적인 요약이니, 도움이 되셨으면 좋겠습니다!

swiper 캐러셀(역방향 자동 전환은 무한 루프와 유사)

swiper 플러그인 캐러셀, 기본 캐러셀 순서는 오른쪽에서 왼쪽으로 첫 번째 사진, 두 번째 사진, 세 번째 사진, 그 다음부터 볼 수 있습니다 육안으로는 세 번째 사진부터 첫 번째 사진까지 왼쪽에서 오른쪽으로 되감기 때문에 시각적 경험은 높지 않지만,

스와이프 자체의 특성을 이용하여 무한 루프 캐러셀로 변경할 수는 있습니다.

HTML code

<p class="course-banner-box">
  <p class="swiper-container">
    <p class="swiper-wrapper"> <!--四张轮播图-->
      <p class="swiper-slide slide1"></p>
      <p class="swiper-slide slide2"></p>
      <p class="swiper-slide slide3"></p>
      <p class="swiper-slide slide4"></p>
    </p>
    <!-- Add Pagination -->
    <p class="swiper-pagination"></p>
    <!-- Add Arrows -->
    <p class="button-box">
      <p class="button"> <!--左右按钮-->
        <p class="swiper-button-next"></p>
        <p class="swiper-button-prev"></p>
      </p>
    </p>
  </p>
</p>

script code

<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',//pagination分页器
    nextButton: '.swiper-button-next',//前进后退按钮
    prevButton: '.swiper-button-prev',
    paginationClickable: true,//参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
    spaceBetween: 30,//slide之间的距离（单位px）。
    centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
    loop : true,//复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播)
    autoplay: 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
    autoplayDisableOnInteraction: false//点击后打断auto-play
  });
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!