이 글은 주로 모바일 측에서 터치 슬라이딩 플러그인 스와이퍼를 사용하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
Swiper는 모바일에서 매우 강력한 터치 슬라이딩 플러그인입니다. 모바일 측 플러그인, 다음 코드는 일반적으로 사용되는 일부 구성만 보여줍니다. 자세한 내용은 공식 웹사이트 api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" > <style> /*假设设计稿是640 轮播图区域640*300*/ html{ font-size:100px; } html,body{ width:100%; overflow-x:hidden; } .swiper-container{ margin:0 auto; height:3rem; overflow:hidden; } .swiper-slide{ height:3rem; } .swiper-slide img{ width:100%; height:100%; } </style> </head> <body> <section class="swiper-container"> <p class="swiper-wrapper"> <p class="swiper-slide"> <img class='swiper-lazy' src="img/banner/banner1.jpg" alt=""> <p class='swiper-lazy-preloader'></p> </p> <p class="swiper-slide"> <img class='swiper-lazy' src="img/banner/banner2.jpg" alt=""> <p class='swiper-lazy-preloader'></p> </p> <p class="swiper-slide"> <img class='swiper-lazy' src="img/banner/banner3.jpg" alt=""> <p class='swiper-lazy-preloader'></p> </p> </p> <!-- 如果需要分页器 --> <p class="swiper-pagination"></p> <!-- 如果需要导航按钮 --> <p class="swiper-button-prev"></p> <p class="swiper-button-next"></p> <!-- 如果需要滚动条 --> <p class="swiper-scrollbar"></p> </section> <script src='swiper.min.js'></script> <script> //REM 响应式 ~function(){ var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN; document.documentElement.style.fontSize = ratio*100 + "px"; }(); //初始化swiper实现区域的滑动 //new Swiper([container selector],[settings]) var swiper1 = new Swiper('.swiper-container',{ loop:true,//无缝衔接滚动 effect:'cube',//滑动效果 autoplay:3000, autoplayDisableOnInteraction:false,//用户操作swiper之后不禁止autoplay pagination:'.swiper-pagination', paginationType:'progress',//分页器样式 lazyLoading:true,//图片延迟加载 lazyLoadingInPrevNext:true//前一个和后一个延迟加载 }) </script> </body> </html>에서 확인할 수 있습니다.
위 내용은 스와이프 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!