**sweiper官方網址：https://www.swiper.com.cn/**（API有關于組件的用法的描述）
下面的例子為精選的輪播
~~~
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
<style>
.swiper-container {
//可對大小進行定制設定
}
.swiper-pagination-bullet{
//對下面的小圓點進行定制設定
}
.swiper-pagination-bullet-active{
//對小圓點的背景顏色進行定制設定
}
</style>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="快選擇照片放這里吧" alt=""></div>
<div class="swiper-slide"><img src="快選擇照片放這里吧" alt=""></div>
<div class="swiper-slide"><img src="快選擇照片放這里吧" alt=""></div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
//autoplay設置自動切換
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
~~~
又一個輪播
~~~
<div class="container">
<div id="list" style="left: 0px;">
<img src="這里添加圖片" alt="">
<img src="這里添加圖片" alt="">
<img src="這里添加圖片" alt="">
<img src="這里添加圖片" alt="">
<img src="這里添加圖片" alt="">
</div>
<button id="prev"></button>
<button id="next"></button>
<div id="btns">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var btns= document.getElementById("btns").children;
var index = 0;
prev.onclick = function(){
animate(600);
xiaoyuandian(-1);
}
next.onclick = function(){
animate(-600);
xiaoyuandian(1);
}
function xiaoyuandian(k){
index+=k;
if(index>4){
index = 0;
}else if(index<0){
index = 4;
}
for(var j=0;j<btns.length;j++){
btns[j].classList.remove("current")
}
btns[index].classList.add("current");
}
function animate(offset){
let newleft = parseInt(list.style.left) + offset;
if(newleft<-2400){
newleft = 0;
}else if (newleft>0){
newleft = -2400;
}
list.style.left = newleft + "px";
}
for(var i=0;i<btns.length;i++){
btns[i].index = i;
btns[i].onclick = function(){
for(var j=0;j<btns.length;j++){
btns[j].classList.remove("current");
}
var newset = (this.index-index)*(-600);
console.log(newset);
animate(newset);
index = this.index;
this.classList.add("current");
}
}
</script>
~~~
