下文所述一切都是個人見解,僅當參考;如有錯誤,請指教,十分感謝。
1.下載swiper軟件
（1）npm方法
npm install swiper
（2）官網下載
swiper插件
2.圖片輪播（效果圖+代碼）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>測試</title>
<link rel="stylesheet" href="../swiper-5.0.4/swiper-5.0.4/package/css/swiper.min.css"> //引入swiper的css
<style>
.mySwiper1{
--swiper-theme-color: #ff6600;/* 設置Swiper風格 */
--swiper-navigation-color: #00ff33;/* 單獨設置按鈕顏色 */
--swiper-navigation-size: 30px;/* 設置按鈕大小 */
width:480px;
height:270px;
margin:20px auto;
border:1px solid red;
}
.swiper-slide a img{
display: block;
width: 100%;
}
.wiper-pagination{
--swiper-theme-color: #ff6600;
--swiper-pagination-color: #00ff00;/* 兩種都可以 */
}
.swiper-container .hide{
opacity:0;
}
.swiper-button-next,.swiper-button-prev{
transition:opacity 0.5s;
}
.swiper-button-disabled{
display:none;
}
</style>
</head>
<body>
<div class="swiper-container banner mySwiper1">
<div class="swiper-wrapper">
<div class="swiper-slide "><a href="#"><img src="https://imgchr.com/i/M6MoQg" alt=""></a></div>
<div class="swiper-slide "><a href="#"><img src="https://imgchr.com/i/M6MhJf" alt=""></a></div>
<div class="swiper-slide "><a href="#"><img src="./img/demo_6.jpg" alt=""></a></div>
<div class="swiper-slide "><a href="#"><img src="./img/demo_4.jpg" alt=""></a></div>
</div>
<div class="btn">
<div class="swiper-button-prev"></div><!--左箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
<div class="swiper-button-next"></div><!--右箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
</div>
<div class="swiper-pagination"></div><!--分頁器。如果放置在swiper-container外面，需要自定義樣式。-->
</div>
<div id="a"></div>
<div class="b"></div>
<script language="javascript" src="./src/js/jquery-3.4.1.min.js"></script>
<script language="javascript" src="../swiper-5.0.4/swiper-5.0.4/package/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.mySwiper1', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true, ////點擊分頁器的指示點分頁器會控制Swiper切換
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//設置
on: {
slideChangeTransitionEnd: function(){
if(this.isEnd){
this.navigation.$nextEl.css('display','none');
}else{
this.navigation.$nextEl.css('display','block');
}
},
},
//可設置爲'slide'（普通切換、默認）,"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉
effect : '', //輪播類型
});
//鼠標移出隱藏按鈕，移入顯示按鈕
swiper.el.onmouseover=function(){
swiper.navigation.$nextEl.removeClass('hide');
swiper.navigation.$prevEl.removeClass('hide');
}
swiper.el.onmouseout=function(){
swiper.navigation.$nextEl.addClass('hide');
swiper.navigation.$prevEl.addClass('hide');
}
</script>
</body>
</html>