JS中Swiper的使用和輪播圖效果
更新時間：2017年08月11日 11:07:40 作者：diasa
Swiper是移動端的一款非常強(qiáng)大的觸摸滑動插件。下面通過本文給大家分享JS中Swiper的使用和輪播圖效果，感興趣的的朋友一起看看吧
Swiper是移動端的一款非常強(qiá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è)計稿是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>
<!-- 如果需要滾動條 -->
<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實現(xiàn)區(qū)域的滑動
//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>
總結(jié)
以上所述是小編給大家介紹的JS中Swiper的使用和輪播圖效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Electron實現(xiàn)應(yīng)用打包、自動升級過程解析
這篇文章主要介紹了Electron實現(xiàn)應(yīng)用打包、自動升級過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
本篇文章主要介紹了解決JS中乘法的浮點(diǎn)錯誤的方法。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
three.js著色器材質(zhì)的內(nèi)置變量示例詳解
這篇文章主要給大家介紹了關(guān)于three.js著色器材質(zhì)內(nèi)置變量的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript操作Oracle數(shù)據(jù)庫示例
這篇文章主要介紹了JavaScript操作Oracle數(shù)據(jù)庫示例,本文使用ActiveXObject實現(xiàn)訪問Oracle數(shù)據(jù)庫,需要的朋友可以參考下2015-03-03
在一些情境下,用戶通過瀏覽器上傳word、excel、pdf等各種類型的文件到系統(tǒng),上傳后可以隨時下載,下面這篇文章主要介紹了前端通過表單將pdf等文件傳入后端的相關(guān)資料,需要的朋友可以參考下2024-09-09
手機(jī)開發(fā)必備技巧：javascript及CSS功能代碼分享
這篇文章主要介紹了手機(jī)開發(fā)必備技巧：javascript及CSS功能代碼分享,本文講解了viewport(可視區(qū)域)操作、鏈接操作、javascript事件等內(nèi)容,需要的朋友可以參考下2015-05-05
Electron中關(guān)于靜態(tài)資源加載問題的解決方案
通常,我們在使用electron框架的時候會使用到loadFile/loadURL進(jìn)行頁面的加載,分別是加載本地文件和加載網(wǎng)絡(luò)文件,當(dāng)nuxtjs/nextjs想引入到electron中顯示時,你會遇到資源路徑引用的問題,所以本文給大家介紹了Electron中關(guān)于靜態(tài)資源加載問題的解決方案2024-12-12
JavaScript編寫帶旋轉(zhuǎn)+線條干擾的驗證碼腳本實例
除了普通的可點(diǎn)擊更換的四位驗證碼實現(xiàn),我們這里還展示了更進(jìn)一步的JavaScript編寫帶旋轉(zhuǎn)+線條干擾的驗證碼腳本實例,需要的朋友可以參考下2016-05-05
JS實現(xiàn)訪問DOM對象指定節(jié)點(diǎn)的方法示例
這篇文章主要介紹了JS實現(xiàn)訪問DOM對象指定節(jié)點(diǎn)的方法,結(jié)合實例形式分析了javascript針對DOM元素節(jié)點(diǎn)屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
javascript獲取鼠標(biāo)點(diǎn)擊元素對象(示例代碼)
本篇文章主要介紹了利用javascript獲取鼠標(biāo)點(diǎn)擊元素對象的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12