標籤：
我們在做項目的過程中，有時候客戶需求要求你在同一個頁面中，寫幾個不同樣式的輪播圖效果，那麼如何快速實現呢？（要知道若果你每個輪播圖都要用原生javascript寫的話，會很麻煩，代碼也不夠簡潔）這裡我們就可以藉助外掛程式來實現這一功能，swiper.js就是一個專門處理輪播圖效果的js庫,下面舉例來說明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>小米防丟器</title>
<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
</head>
<body>
<section class="swiper-container swiper-container-part5 part5">
<ul class="swiper-wrapper">
<li class="swiper-slide"><img src="img/wallet.jpg" ></li>
<li class="swiper-slide"><img src="img/pet.jpg" ></li>
<li class="swiper-slide"><img src="img/key.jpg" ></li>
<li class="swiper-slide"><img src="img/bag.jpg" ></li>
<li class="swiper-slide"><img src="img/camera.jpg" ></li>
<li class="swiper-slide"><img src="img/computer.jpg" ></li>
</ul>
<!-- Add Pagination -->
<li class="swiper-pagination swiper-part5" id="part5" style="text-align: left;margin-left: 100px;margin-bottom: 25px"></li>
<!-- Add Arrows -->
<li class="swiper-button-next"></li>
<li class="swiper-button-prev"></li>
</section>
<section class="swiper-container swiper-container-part20 part20">
<img src="img/ctr_hand.png" class="ctr_hand">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="img/slide-ctr-photo.png" class="slide-ctr-photo">
<ul class="part20-ul1">
<li><h1>遙控自拍</h1></li>
<li><h1>解放雙手、釋放激情</h1></li>
<li><p>解放你的雙手，給你充分的空間擺Pose，天地即秀場。開啟小覓App內建的相機程式，即可輕鬆自拍。支援絕大部分第三方能夠使用音量鍵作為快門按鈕的相機App，如美圖秀秀、美顏相機、柚子相機等。</p></li>
<li><p style="color: #00adee">實拍</p></li>
<li class="photo-person-wrap-1">
<img src="img/photo-person.png" id="photo-person1">
</li>
</ul>
</li>
<li class="swiper-slide">
<img src="img/slide-ctr-music.jpg" class="slide-ctr-photo">
<ul class="part20-ul1">
<li><h1>遙控音樂</h1></li>
<li><h1>隨心切歌</h1></li>
<li><p>享受音樂，當然要自由，音樂遙控，小覓一鍵掌控：開啟小覓App內建的音樂播放器，即可單擊暫停、雙擊下首，三擊上首。廣泛支援絕大部分音樂App，網易雲音樂、QQ音樂、巨鯨等</p></li>
<li><p style="color: #00adee">Android 及 iOS版支援的音樂應用</p></li>
<li class="photo-person-wrap"><img src="img/wangyi.png" id="photo-person2"></li>
</ul>
</li>
<li class="swiper-slide">
<img src="img/slide-ctr-ppt.jpg" class="slide-ctr-photo">
<ul class="part20-ul1">
<li><h1>遙控PPT</h1></li>
<li><h1>放膽自信</h1></li>
<li><p>給你無限的空間掌控演講，揮灑風采。能夠支援Mac電腦以及Windows 8.1及以上內建藍芽4.0的電腦</p></li>
<li><p style="color: #00adee">Mac及Windows上支援的投影片App</p></li>
<li class="photo-person-wrap"><img src="img/ppt-logo.png" id="photo-person3"></li>
</ul>
</li>
</ul>
<!-- Add Pagination -->
<li class="swiper-pagination swiper-part20" style="text-align: center;margin-bottom: 650px"></li>
<!-- Add Arrows -->
<li class="swiper-button-next" style="position: absolute;right: 15%;background-color: #C6C6C6;opacity: 0.5;width:47px;border-radius: 50%"></li>
<li class="swiper-button-prev" style="position: absolute;left: 15%;background-color: #C6C6C6;opacity: 0.5;width: 47px;border-radius: 50%"></li>
</section>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="swiper.min.js"></script>
<script>
$(function () {
var swiper1 = new Swiper(‘.swiper-container-part5‘, {
pagination: ‘.swiper-part5‘,
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 4000,
autoplayDisableOnInteraction: false,
loop: true
});
$("#part5 span").css({
width: ‘1px‘,
height: ‘1px‘,
marginLeft: "45px",
display: "inline-block",
borderRadius: "10px",
backgroundColor: "white"
});
var imgs0 = new Image();
imgs0.src = "img/wallet.png";
var imgs1 = new Image();
imgs1.src = "img/pet.png";
var imgs2 = new Image();
imgs2.src = "img/key.png";
var imgs3 = new Image();
imgs3.src = "img/bag.png";
var imgs4 = new Image();
imgs4.src = "img/camera.png";
var imgs5 = new Image();
imgs5.src = "img/computer.png";
$("#part5 span ").eq(0).html(imgs0);
$("#part5 span ").eq(1).html(imgs1);
$("#part5 span ").eq(2).html(imgs2);
$("#part5 span ").eq(3).html(imgs3);
$("#part5 span ").eq(4).html(imgs4);
$("#part5 span ").eq(5).html(imgs5);
$("#part5 span img").css({
width: ‘30px‘,
height: ‘30px‘,
borderRadius: "0"
});
});
$(function () {
var swiper2 = new Swiper(‘.swiper-container-part20‘, {
pagination: ‘.swiper-part20‘,
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 4000,
autoplayDisableOnInteraction: false,
loop: true
});
$(".swiper-part20 span ").css({
width:‘80px‘,
height:‘80px‘,
marginLeft:"85px",
display:"inline-block",
borderRadius:"10px",
backgroundColor:"#F7F7F7"
});
var imgs0 = new Image();
imgs0.src="img/cameraBlue.png";
var imgs1 = new Image();
imgs1.src="img/musicBlue.png";
var imgs2 = new Image();
imgs2.src="img/pptBlue.png";
$(".swiper-part20 span ").eq(0).html(imgs0);
$(".swiper-part20 span ").eq(0).html(imgs0).append("<p style=‘color: #00AEEF‘>遙控自拍</p>");
$(".swiper-part20 span ").eq(1).html(imgs1);
$(".swiper-part20 span ").eq(1).html(imgs1).append("<p style=‘color: #00AEEF‘>遙控音樂</p>");
$(".swiper-part20 span ").eq(2).html(imgs2);
$(".swiper-part20 span ").eq(2).html(imgs2).append("<p style=‘color: #00AEEF‘>遙控ppt</p>");
$(".swiper-part20 span img").css({
width:‘80px‘,
height:‘70px‘,
borderRadius:"10px"
});
});
</script></body>
</html>
注意看代碼中的紅色部分，由於swiper.js中的選取器名稱是統一的，如果你直接拿來用的話，一個頁面只能用一次，也就是說，如果你的頁面有2個以上的輪播圖，那麼再不改名選取器名稱的前提下他們之間會互相干擾，最終導致效果出不來或者報錯；
所以我在每一個原有swiper-containter類名後面又加了自己的類別選取器，用以區分，然後在JS代碼當中，紅色字型部分也要做出相應的修改；做完這兩個步驟，基本就可以在頁面中實現2個不同效果的輪播圖同時正常工作了；頁面中另外一部分css只
是對section本身的width和height；以及其在頁面中的位置做了調整；所以這裡就沒有給出；有興趣的讀者，可以複製上述代碼試試效果；
swiper.js 原始碼 ：http://www.swiper.com.cn/download/index.html#file7
Html5如何快速在頁面中寫出多個輪播圖效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
