使用Swiper這個輪播插件可以使我們用少少的程式碼實踐輪播效果，它不只可以用來做照片輪播、Banner輪播，還可以做跑馬燈效果。今天我們來做個跑馬燈吧!
首先我們在官網這一頁找到CDN(你也可以用NPM安裝)，分別把CSS與Javascript CDN 貼在HTML的<head>中與`前。
CDN:
阿沁
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
然後這是html的程式碼結構，最外層是.swiper容器，再裡面有.swiper-wrapper包覆每張slide用的，
最裡面是投影片.swiper-slide，裡面寫一些文字。
<!-- Slider main container -->
<div class="swiper ">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。</div>
<div class="swiper-slide">今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。</div>
<div class="swiper-slide">今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。天天氣很好，我想要出去玩。今天天氣很好，我想要出去玩。</div>
</div>
</div>
css 樣式 我寫這樣:
//黑底白字
.swiper-slide{
width:auto;//讓每個投影片寬度auto，使文字不換行，保持單行
font-size:24px;
background-color: #000;
color:white;
}
javascript 長這樣:
//初始化Swiper物件，第一個參數對照你swiper的class
const swiper = new Swiper(".swiper", {
slidesPerView: "auto", //一個view的投影片數量，預設為1。如果沒寫這個，若投影片文字過長就會換行
allowTouchMove: false, //不讓使用者觸碰移動slide
autoplay: {
delay: 0, //自動播放不延遲
disableOnInteraction: false //不因使用者觸碰而停止自動播放
},
loop: true, //反覆循環
speed: 8000 //投影片之間的過渡持續時間（以毫秒為單位），數字愈大跑愈慢
});
寫到這裡會看到跑馬燈開始跑了，但速度忽快忽慢。
這時可以在CSS中加這個就可以都一樣快:
.swiper-wrapper {
transition-timing-function: linear;//使動畫變換的速度一樣快
}
最後長這樣，這是截圖
transition-timing-function
讓我想到啤酒的廣告下面也會有告誡酒後不開車的跑馬燈。
完整程式碼在此CodePen。
iThome鐵人賽
看影片追技術