網頁圖片輪播

前言

圖片輪播應該是網頁上蠻常見的圖片顯示方式，在面對很多張圖片需要顯示的時候，輪播確實是個很好用的方法。

在實作上有好幾種方法，有些並沒有使用成功，在這邊做一個紀錄。

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 寫法

<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 寫法

1. 設定圖片內容

2. 更新秒數

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 裡讓它不斷更新就可以了
<body onload="sequentialImg();">

不太喜歡，因為更新整個頁面，跳動感覺很不舒服，有點影響觀看。

以上完成第二種方式

Slick

這是一個很好用的輪播方式

Demo 網頁: https://kenwheeler.github.io/slick/

首先加入CDN

CDN:
<script type=”text/javascript” src=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js“></script>

<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css“/>
<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css“/>

設定輪播圖片的 style

CSS

.wrapper {
   width:100%;
   height:30%;
   padding-top: 5px;
   text-align:center;
   background-color: #646675
 }
 .carousel {
   width:90%;
   margin:0px auto;
 }
 .slick-slide {
   margin:10px; //圖片與圖片的間隔大小
 }
 .slick-slide img {
   width:100%;
   border: 2px solid #fff; //圖片的邊框大小
 }

$('.carousel').slick({
   slidesToShow: 3,  //可以控制每個輪播有幾張圖片
   dots:true,
   centerMode: true,
 });

HTML

<div class="container">  
 <div class="wrapper">
  <div id="cover" class="carousel">
   <div><img src='01.jpg' /></a></div>
   <div><img src='02.jpg' /></a></div>
   <div><img src='03.jpg' /></a></div>
   <div><img src='04.jpg' /></a></div>
  </div>
 </div>
</div>

以上完成第三種方式

點擊按鈕改變圖片

最後是使用按鈕改變圖片的方式

可以上下調整觀看圖片，這個也很方便兒

HTML 寫法如下:

<div class="row p-2">
   <div class="btn-group-toggle col-md-2 center-block" data-toggle="buttons" onclick="previousImg()">
     <label class="btn btn-secondary active">
         <input type="checkbox" checked autocomplete="off">Previous
     </label>
   </div>
   <div class="btn-group-toggle col-md-2 center-block" data-toggle="buttons" onclick="nextImg()">
     <label class="btn btn-secondary active">
         <input type="checkbox" checked autocomplete="off">Next
     </label>
   </div>
</div>

JS 寫法:

function previousImg() {
  i--;
  if(i == -1)
     i = jsImg.length - 1 ;
  document.getElementById("cover").innerHTML = "<img class='rounded'    src='" + jsImg[i] + "' alt=' ' width=80% />";
}
function nextImg() {
  i++;
  if(i == jsImg.length)
     i = 0;
  document.getElementById("cover").innerHTML = "<img class='rounded' src='" + jsImg[i] + "' alt=' ' width=80% />"; 
}

以上完成第四種方式

前言

目錄

CSS 動態播放

延遲秒數更改圖片

Slick

點擊按鈕改變圖片