溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關JS中Swiper怎么實現輪播圖效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
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">
<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>感謝各位的閱讀！關于“JS中Swiper怎么實現輪播圖效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
