--- title: '網頁圖片輪播' disqus: hackmd --- 網頁圖片輪播 === ![downloads](https://img.shields.io/github/downloads/atom/atom/total.svg) ![build](https://img.shields.io/appveyor/ci/:user/:repo.svg) ![chat](https://img.shields.io/discord/:serverId.svg) ## 目錄 [TOC] ## 前言 圖片輪播應該是網頁上蠻常見的圖片顯示方式，在面對很多張圖片需要顯示的時候，輪播確實是個很好用的方法。 在實作上有好幾種方法，有些並沒有使用成功，在這邊做一個紀錄。 CSS 動態播放 --- 這種播放方式是將圖片設置好，然後持續播放，而且只需更改 CSS ，非常方便使用。但缺點就是它是自動的，沒辦法再用手動去控制它。 > CSS 寫法 ```css= .coverflow{ width: 700px; height: 490px; position: relative; } .coverflow>a{ display: block; position: absolute; top:0; left:0; opacity: 0; filter: alpha(opacity=0); /*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/ -webkit-animation: silder 15s linear infinite; animation: silder 15s linear infinite; } .coverflow>a>img{ max-width: 100%; } /*動畫關鍵影格*/ @-webkit-keyframes silder { 3% { opacity: 1; filter: alpha(opacity=100); } 27% { opacity: 1; filter: alpha(opacity=100); } 30% { opacity: 0; filter: alpha(opacity=0); } } @keyframes silder { 3% { opacity: 1; filter: alpha(opacity=100); } 27% { opacity: 1; filter: alpha(opacity=100); } 30% { opacity: 0; filter: alpha(opacity=0); } } /*每個圖片各延遲5秒*/ .coverflow>a:nth-child(3) { -webkit-animation-delay: 10s; animation-delay: 10s; } .coverflow>a:nth-child(2) { -webkit-animation-delay: 5s; animation-delay: 5s; } .coverflow>a:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } /*滑入時停止播放*/ .coverflow:hover>a{ -webkit-animation-play-state: paused; animation-play-state: paused; } ``` > HTML 寫法 ```HTML= <div id="cover" class="coverflow"> <a href='#'><img src='' alt=' ' ></a> <a href='#'><img src='' alt=' ' ></a> <a href='#'><img src='' alt=' ' ></a> </div> ``` 以上完成第一種方式 延遲秒數更改圖片 --- > js 寫法 > 設定圖片內容還有更新秒數 ```javascript= setInterval("randomImg()",2000);//兩秒更新 function sequentialImg() { var jsImg_len = jsImg.length; var i = 0; console.log(jsImg_len); document.getElementById("cover").innerHTML = "<img src='" + jsImg[i] + "' width=80%>"; if(i >= jsImg_len) { i = 0; } i++; } ``` > HTML 寫法 > 只要加在 body 裡讓它不斷更新就可以了 ```HTML= <body onload="sequentialImg();"> ``` > 不太喜歡，因為更新整個頁面，跳動感覺很不舒服，有點影響觀看。 Carousel --- > 這個方式我並沒有試成功，但有參考的網頁，可以匯入 Carousel 的 CDN 做使用 > Demo 網頁: https://owlcarousel2.github.io/OwlCarousel2/demos/demos.htmlo/mermaid/ > CDN: https://cdnjs.com/libraries/OwlCarousel2 ###### tags: `圖片輪播` `CSS` `HTML` `javascript`