Swiper是移動端的一款很是強大的觸摸滑動插件,下面代碼只展現一些經常使用的配置,具體能夠查看官網apicss
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.css"> <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"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner1.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner2.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner3.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> </div> <!-- 若是須要分頁器 --> <div class="swiper-pagination"></div> <!-- 若是須要導航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 若是須要滾動條 --> <div class="swiper-scrollbar"></div> </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>