JS中Swiper的使用和輪播圖效果
Swiper是移動(dòng)端的一款非常強(qiáng)大的觸摸滑動(dòng)插件,下面代碼只展示一些常用的配置,具體可以查看官網(wǎng)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> /*假設(shè)設(shè)計(jì)稿是640 輪播圖區(qū)域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> <!-- 如果需要導(dǎo)航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滾動(dòng)條 --> <div class="swiper-scrollbar"></div> </section> <script src='swiper.min.js'></script> <script> //REM 響應(yīng)式 ~function(){ var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN; document.documentElement.style.fontSize = ratio*100 + "px"; }(); //初始化swiper實(shí)現(xiàn)區(qū)域的滑動(dòng) //new Swiper([container selector],[settings]) var swiper1 = new Swiper('.swiper-container',{ loop:true,//無縫銜接滾動(dòng) effect:'cube',//滑動(dòng)效果 autoplay:3000, autoplayDisableOnInteraction:false,//用戶操作swiper之后不禁止autoplay pagination:'.swiper-pagination', paginationType:'progress',//分頁器樣式 lazyLoading:true,//圖片延遲加載 lazyLoadingInPrevNext:true//前一個(gè)和后一個(gè)延遲加載 }) </script> </body> </html>
總結(jié)
以上所述是小編給大家介紹的JS中Swiper的使用和輪播圖效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
前端CryptoJS加密、后端JAVA解密代碼實(shí)現(xiàn)參考
這篇文章主要介紹了前端CryptoJS加密、后端JAVA解密代碼實(shí)現(xiàn)參考,需要的朋友可以參考下2023-12-12JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07layui 對彈窗 form表單賦值的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui 對彈窗 form表單賦值的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果
這篇文章主要介紹了用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果的方法,而且在多瀏覽器下的兼容效果也得到提升,需要的朋友可以參考下2015-11-11JavaScript計(jì)算字符串實(shí)際長度方法示例
這篇文章主要為大家介紹了JavaScript計(jì)算字符串實(shí)際長度方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08javascript強(qiáng)大的日期函數(shù)代碼分享
這篇文章介紹了javascript強(qiáng)大的日期函數(shù)代碼,有需要的朋友可以參考一下2013-09-09