如何單純使用CSS3及HTML製作圖片輪播效果

4 月 18, 2015 Posted by Ellen CSS, HTML 76 comments

你知道嗎？有了CSS3，就算不用javascript，我們也可以製作出圖片輪播效果。今天這篇文章就要示範如何單純使用CSS3及HTML製作圖片輪播效果。

要製作純 CSS的輪播效果、就要先充份了解 CSS3 的 transitions 和 animation

CSS3 TRANSITIONS

一般當CSS屬性改變的時候、變化的效果是立即的。但是有了CSS3 transitions之後，我們可以達到漸變的動畫效果。

CSS3 transitions有四種屬性
屬性	說明
transition-property	定義套用漸變的屬性名稱
transition-duration	定義完成漸變效果的時間
transition-timing-function	定義漸變效果的速度曲線
transition-delay	定義漸變效果開始的時間
transition	定義漸變效果屬性的簡寫屬性 transition: property duration timing-function delay;

支援CSS3 transitions的瀏覽器
Property	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Chrome for Android
-webkit-transition	–	4+	4+	3.1+	11.5+	3.2 +	–	2.1+	–
transform	10+	31+	31+	7+	27+	7.1 +	–	4.4+	41+

W3C Animatable Properties詳細列出了哪些CSS屬性可以套用漸變的效果。

讓我們實際用CSS3 transitions來做一個滑鼠滑入的效果

<div class="eg-CSS3-transitions">
滑鼠滑上來看看<br>
使用CSS3 transitions漸變效果
</div>
<div class="eg-normal">
滑鼠滑上來看看<br>
沒有CSS3 transitions漸變效果
</div>

當滑鼠移到<div class="eg-CSS3-transitions>及<div class="eg-normal>的上面時、該區塊的寬度由原本的250px、變為300px


div.eg-CSS3-transitions,
div.eg-normal {
    width: 250px;
    padding: 15px;
    background-color: #83CDBE;
    margin: .5em;
    box-sizing: border-box ;
    color: #fff;
}
div.eg-CSS3-transitions:hover,
div.eg-normal:hover {
    width: 300px;
}
div.eg-CSS3-transitions {
    -webkit-transition: width 1s;
            transition: width 1s;
}

試試看完成的CSS3 transitions的效果

滑鼠滑上來看看
使用CSS3 transitions漸變效果

滑鼠滑上來看看
沒有CSS3 transitions漸變效果

CSS3 ANIMATIONS

CSS3 transitions幫我們實現了從A到B的漸變效果；CSS animation則是進一步讓我們控制漸變效果的時間、週期、和關鍵的時間點，從而達成A到B到C、再回到A這種不斷循環執行的動畫效果。

CSS animation的屬性
屬性	說明
@keyframes	定義在一個動畫週期間的”關鍵的時間點”(觀念類似flash中的關鍵影格)。以百分比來表示時間：0%是動畫的開始，而100%則是動畫的結束。在動畫執行基間、可以任意添加”關鍵的時間點”
animation	所有動畫屬性的簡寫屬性，( animation-play-state 除外)。 transition: property duration timing-function delay;
animation-name	定義 @keyframes 動畫的名稱。
animation-duration	定義動畫完成一個周期的時間，預設是0。
animation-timing-function	定義動畫的速度曲線。預設是 “ease”。
animation-delay	定義動畫開始的時間。預設是 0。
animation-iteration-count	定義動畫播放的次數。預設是 1。
animation-direction	定義動畫在下一個週期是否逆向動作。預設是 “normal”。
animation-play-state	定義動畫的狀態是正在運行還是暫停。預設是 “running”。
animation-fill-mode	定義對象在動畫時間之外的狀態。

支援CSS3 transitions的瀏覽器
Property	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Chrome for Android
-webkit-animation	–	5+	4+	4+	15+	3.2 +	–	2.1+	41+
animation	10+	31+	43+	–	–	–	–	–	–

就像flash動畫的關鍵影格一樣，@keyframe 包含了時間點及發生何種變化的資訊。例如有一個動畫、他的動畫週期開始時顏色為黃、動畫執行到50%時顏色為紅、動畫結束時顏色又改為黃。這是一個由黃變紅再由紅變黃、不停變化的動畫。剛提到的開始、結束、黃、紅等時間和顏色的資訊、就是@keyframe所要定義的資訊。
有了CSS3 transitions和CSS animation，就算沒有flash或javascript、也能直接在網頁中建立動畫效果哦。

實作純css的slider

掌握了基本的CSS3 transitions和CSS animation、我們就可以開始準備製作純css的slider了。接下來我們要示範如何利用CSS3 transitions和CSS animation製作一個dissolve效果(溶接效果)的圖片輪播器。

Step 1:先將圖片就定位

HTML Markup

<div class="slider_container">
	<div>
		<img src="images/image1.png" alt="pure css3 slider" />
		<span class="info">Image Description 1</span>
	</div>
	<div>
		<img src="images/image2.png" alt="pure css3 slider" />
		<span class="info">Image Description 2</span>
	</div>
	<div>
		<img src="images/image3.png" alt="pure css3 slider" />
		<span class="info">Image Description 3</span>
	</div>
	<div>
		<img src="images/image4.png" alt="pure css3 slider" />
		<span class="info">Image Description 4</span>
	</div>
	<div>
		<img src="images/image5.png" alt="pure css3 slider" />
		<span class="info">Image Description 5</span>
	</div>
</div>

CSS Style


.slider_container {
    margin: 30px auto;
    width: 400px;
    height: 280px;
    position: relative;
    border: 20px solid;    
    border-color: #fff;
    border-bottom-width: 100px;
    background-color: #f5f5f5;
    box-shadow: #666 0 0 5px;
}

.slider_container div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

Step 2:確認輪播效果的時間軸

先決定過場時間(前後兩張圖片重疊的時間)、每張圖片播放的時間、完成一個週期需要多少時間。

pure css3 slider

由上圖我們知道我們的輪播器共有5張圖片，過場時間為1秒、每張圖片播放4秒、一個完整的週期是25秒。因為@keyframe的時間是以百分比來表示，因為我們要先把秒換成百分比。
100% / 25秒 = 4% ( 每秒)
4% = 1秒

CSS3 Keyframes Animation

設定動畫週期。


.slider_container div {
    -webkit-animation: round 25s linear infinite;
            animation: round 25s linear infinite;
}

@-webkit-keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}

每張圖片進場時間相隔5秒


.slider_container div:nth-child(5) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.slider_container div:nth-child(4) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.slider_container div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

.slider_container div:nth-child(2) {
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}

.slider_container div:nth-child(1) {
    -webkit-animation-delay: 20s;
            animation-delay: 20s;
}

CSS transition

當滑鼠移到圖片上時、底下出現 “Image Description” 字樣且輪播動畫暫停。當滑鼠離開時、”Image Description” 字樣且輪播動畫繼續播放。


.slider_container span {    
    color: #000;
    background: #fff;
    position: absolute;
    left: 0%;
    top: 280px;
    width: 400px;
    height: 100px;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    -webkit-transform:scaleY(0);
        -ms-transform:scaleY(0);
            transform:scaleY(0);
    -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}

.slider_container:hover span {
    width: 100%;
    -webkit-transform:scaleY(1);
        -ms-transform:scaleY(1);
            transform:scaleY(1);
}

Pause And Restart
當滑鼠移到圖片上時，暫停播放動畫。


.slider_container:hover div {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

完成的實例：

Image Description 1

Image Description 2

Image Description 3

Image Description 4

Image Description 5

這是一個很簡單的輪播動畫、如果你需要新增或減少圖片的話，別忘了讓每張圖片進場的時間相隔5秒，一個動畫週期的時間也要重新定義。記得要重新計算1秒等於多少百分比。

另外、在實際的應用上仍需要考慮瀏覽器的支援性。這一個播放器是我之前在做一個手機網頁時寫的，當時的版本比較簡單、只有無限循環播放而已。因為是手機網頁、所以只需考慮行動裝置的瀏覽器。對行動裝置來說、這個輕巧的圖片輪播器，執行起來挺順暢的！

2019/5月更新

為純CSS的輪播動畫加上響應式效果：

如果想要為之前做的輪播動畫添加上響應式的效果，最便捷的方式就是借用一下bootstrap 的 Responsive embed 的概念。

在輪播動畫的外面包一層容器，先定義好容器的長寬比例，再將輪播動畫的長寬各設為100%。其中padding-bottom的百分比為高度除以寬度。假設容器的寬度與高度的比例為16:9，那padding-bottom就要設為56.25% ( 9除以16)。

Bootstrap 的作法：


//外層的響應式容器
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}
//被嵌入的內容
.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

我們的輪播動畫在圖片底下又多了一個高度為100px的文字區塊，所以padding-bottom 應該是高度除以寬度的比例再加上100px。可以用CSS calc 來表示。另外原本20px的邊框在計算上有點麻煩，所以我們在容器的外圍再加一層容器，用來定義邊框以及陰影。

增加的CSS

.rwd_slider_container_wrapper {
  width: 440px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: #666 0 0 5px;
  padding: 20px;
  margin: 0 auto;
}
.rwd_slider_container {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  box-sizing: border-box;
  padding-bottom: calc(70% + 100px);
}
.rwd_slider_container .slider_container {
  box-shadow: none;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
}
.rwd_slider_container .slider_container div {
  width: 100%;
  line-height: 0;
}
.rwd_slider_container .slider_container span {
  top: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

HTML的修正如下：

<div class="rwd_slider_container_wrapper">
    <div class="rwd_slider_container">    
        <div class="slider_container">
            .........
        </div><!-- end of .slider_container -->
    </div><!-- end of .rwd_slider_container -->
</div><!-- rwd_slider_container_wrapper-->

<br /> See the Pen <a href="https://codepen.io/ellen-shih/pen/wbJPKL/">Pure CSS Responsive Slider – 純CSS的響應式圖片輪播器</a> by Ellen Shih<br /> (<a href="https://codepen.io/ellen-shih">@ellen-shih</a>) on <a href="https://codepen.io">CodePen</a>.<br />

將轉場效果變為左右滑動

左右滑動與淡入淡出最大的不同點在於：圖片滑出之後還必須回到起始的位置，為下次的滑入作準備。

淡入淡出的動作：

圖片淡入 -> 圖片靜止 -> 圖片淡出

左右滑動的動作：

圖片滑入 -> 圖片靜止 -> 圖片滑出 -> 圖片回到起始位置

CSS調整為：

@-webkit-keyframes round {
  4% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 0 - 1秒 滑入*/
  }
  20% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 1- 5秒靜止*/
  }
  24% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: -100%;
    /* 5-6秒滑出*/
  }
  26% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: -100%;
    /* 6-6.5秒變透明*/
  }
  28% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: 100%;
    /* 6.5-7秒回到起始位置*/
  }
}

另外，因為一開始圖片的位置在容器的外面，所以在網頁剛開始載入的時候，輪播器的內容會是一片空白，為了避免這種情況，我們可以幫輪播器加上背景。若是希望這個背景可以有滑出的效果，那麼我們就要利 ::before 這個偽元素來製作會滑動的背景。

.slider_container:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 1;
  filter: alpha(opacity=100);
  width: 100%;
  height: 100%;
  background-image: url(bk-image.jpg);
  animation: bk 25s linear;
}
@keyframes bk {
  0% {
    left: 0;
    /* 初始位置*/
  }
  4% {
    left: -100%;
    /* 0 - 1秒 滑出*/
  }   
}
@keyframes bk {
  0% {
    left: 0;
    /* 初始位置*/
  }
  4% {
    left: -100%;
    /* 0 - 1秒 滑出*/
  }  
}

76 Comments

回覆 jack su | 5 月 25th, 2016

你好不好意思想請問一下這個輪播可以用在背景裡嗎?! 要怎麼樣把這程式碼寫在css 裡呢希望你能撥空回答感謝你
- 回覆 Ellen | 5 月 26th, 2016
  作背景輪播最快的方式就是把做好的圖片輪播以z-index的方式向下拉。
  假設我要做一個滿版的背景輪播
  那就幫slider_container再加上底下的屬性就可以了
```
    
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
```
回覆 jack su | 5 月 27th, 2016

喔喔!! 感謝您謝謝了 z-index: -1; 的意思就像排版的往下放一層是吧?! 感謝您的回答
- 回覆 Samson | 6 月 23rd, 2017
  
  不是放下一層的意思，是layer 排序的第負一層，就像一座大廈，
  z-index: 0; 是地面，是預設
  1以上是向天發展
  -1以下是向地底發展
  
  而user就是鳥瞰的，就像一隻鳥在天上望下來，假設你有99層，就先看到99層的東西，如果頭重腳輕的話，就只能望到第99層的東西；反之，99層是很少／有alpha channel，就可以看到更下層的東西。
  只要用簡單的3D原理想，再用2D形式來表達。
回覆小吳 | 6 月 19th, 2016

您好，覺得您的文章很棒，也使用了這個效果，請問可以將內容備份到自己的網站嗎？
相當感謝！
- 回覆 Ellen | 7 月 7th, 2016
  
  記得載明出處並提供連結就好
  - 回覆阿呆 | 8 月 13th, 2016
    
    請問我更換圖檔為何沒有出現我圖檔輪播
    - 回覆 Ellen | 6 月 28th, 2017
      
      您好、之前範例有點問題，我重新整理過來、您再試試。
回覆小吳 | 6 月 23rd, 2016

Ellen大大您好，我在套用您的圖片至部落格時想將圖片弄成滿版。
但無論是您上面提供的方法或是用100%，又或者是vw、vh，滿版圖片都會遮住文章區塊，不知如何是好？
我的圖片輪播是放在header區塊的下面。
請問有什麼好辦法可以解決這樣的問題嗎？
- 回覆 Ellen | 7 月 7th, 2016
  
  試試看position: fixed; z-index: -1
回覆 Poi145 | 8 月 26th, 2016

><不好意思想請問一下我想製作slide但是所有圖片都沒有乖乖在框框裡面而是散路在介面
想請問我哪裡出問題
- 回覆 Ellen | 6 月 28th, 2017
  
  您好、之前範例有點問題，我重新整理過來、您再試試。
回覆 tania | 9 月 2nd, 2016

你好因為畢業專題需要能否使用您的程式碼在專題網頁上使用?謝謝
- 回覆 Ellen | 6 月 28th, 2017
  
  請取用 ^^。
回覆 chopin | 9 月 6th, 2016

您好，我在圖片位置輸入網址連結，圖片一直無法顯示出來，請問是甚麼原因，謝謝。
- 回覆 Ellen | 6 月 28th, 2017
  
  您好、之前範例有點問題，我重新整理過來、您再試試。另外這個範例不支援連結哦。
回覆小怡 | 12 月 15th, 2016

您好你的圖片輪播做得很好可是我不知道為什麼用不上 divimg和divspan 圖片輪播的時候總是顯示第一張閃過其他圖片輪播不了請問是哪一個步驟做錯了嗎？希望你能回答謝謝你
- 回覆 Ellen | 6 月 28th, 2017
  
  您好，之前貼的範例有點問題，我重新整理過了。
回覆 WC | 12 月 16th, 2016

請問您如何在滑鼠移到圖片上時，除了暫停播放動畫,當按下圖片時,可以連到另一個網頁?
- 回覆 Ellen | 6 月 28th, 2017
  
  這個範例目前做不到連結的效果，因為所有的圖片實際上一直重疊在一起、只是暫時隱藏而已，所以只有最後一張圖片的連結能被點擊到。改天我再把加上連結效果的範例丟上來。
回覆 Jack su | 6 月 26th, 2017

大大您好想再次請教您如何限定字體的出現壓在圖片的下底層就好了呢？感謝您
- 回覆 Ellen | 6 月 28th, 2017
  
  不好意思、我不太理解，您說的字體是指”Image Description”嗎？壓在圖片的下底層是指”文字要被圖片蓋掉”？？
回覆 jesselo | 7 月 3rd, 2017

我想請問一下
hover後顯示的description時間會和pause連動嗎？
有時候我hover一下子移開後下一張要過特別久才會顯現
而且有時候hover顯示的description不是該張的（例如顯示第二張圖時hover，description變成第五張的，移開後還是第二張圖）
- 回覆 Ellen | 7 月 31st, 2018
  
  您好，要給我連結才能幫你看問題出現在哪裡哦。
回覆 Luis Liu | 11 月 28th, 2017

Ellen 大您好，
想請問一下，我是否可以在 Outlook 2010 下面，看到這樣的圖片動態輪播效果？
我之前測試過 Java & GIF 都無法顯示。（不確定是否公司MIS鎖定或是 Outlook 不支援）
- 回覆 Ellen | 6 月 4th, 2018
  
  你試著照這方法操作看看如何解決 Outlook 2007 / 2010 郵件中 GIF 動畫無法播放 (一點通系列）
回覆 Mm | 2 月 23rd, 2018

請問，如果圖片不要過場時間，
快速地換圖片
以一張0.03秒的速度播放
Keyframes要如何設定呢？
- 回覆 Ellen | 5 月 29th, 2018
  
  你說的是gif動畫的感覺嗎？那完全是另外一種概念囉，這個範列不適合
回覆 Leo Liu | 4 月 20th, 2018

唔好意思呀！我想問一問CSS部份是Copy所有Code於一個css的檔案就可以了？還是分開幾個檔案啦？
- 回覆 Ellen | 5 月 29th, 2018
  
  css 放同一個檔案就可以了
回覆 Bibi | 6 月 15th, 2018

Ellen 大您好，
我使用了您的範例做背景圖輪播，但在mac Safari發生一個bug：點選綠色視窗縮放的按鈕後，輪播會停止(圖片都消失)，過了一會才又開始輪播，然後輪播一輪回後又會空白一陣子再繼續播，請問您在safari有遇到這個問題嗎？
- 回覆 Ellen | 7 月 31st, 2018
  
  我沒有在mac上測過，有連結嗎？幫你瞧瞧。
回覆 JK | 7 月 17th, 2018

請問如果我只要4張照片罷了,要改什麼?
我試過slider_container那邊只放4張照片,但是他還是5張照片輪播
- 回覆 Ellen | 7 月 31st, 2018
  
  從第二個步驟(確認輪播效果的時間軸)開始就要重新計算了哦。四張圖片的一個週期(100%)應該是20秒，所以1秒=5%。以此類推，所有的數字都要重新計算過。
回覆 Dolly | 7 月 18th, 2018

如果我要加一個span的字體在照片外面的請問要如何改?
- 回覆 Ellen | 7 月 31st, 2018
  
  不太懂您的需求耶，「在照片外面」是什麼意思。
回覆 SK | 10 月 10th, 2018

請問怎樣可以使圖片和文字一起達成輪播效果？
- 回覆 Ellen | 5 月 16th, 2019
  
  把文字的 transform 和 transition 屬性全拿掉就可以了
回覆練習生 | 10 月 21st, 2018

請問一下怎麼把背景的框框去掉
- 回覆 Ellen | 5 月 16th, 2019
  
  border 拿掉就好
回覆 HUNG YIN | 12 月 1st, 2018

非常謝謝你的提供! 上到了一課! 感謝你!!正好工作很需要!
- 回覆 Ellen | 5 月 16th, 2019
  
  不客氣 ^^
回覆 Ashley | 12 月 26th, 2018

您好想詢問做好的輪播，結果它會隨著網頁卷軸拉上拉下跟著跑動，請問有甚麼解決辦法?
- 回覆 Ellen | 5 月 16th, 2019
  
  如果是要做滿版的效果，可以參考為純CSS的輪播動畫加上響應式效果，將外層的響應式容器設定成滿版。可以這樣子設定：
  .rwd_slider_container_wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
回覆 Ashley | 12 月 26th, 2018

想請問一下，按照您的走向是不會有任何問題，是置中狀況呈現，想詢問如果想讓它在水平靠左要如何更改? 謝謝
- 回覆 Ellen | 5 月 16th, 2019
  
  slider_container 裡的 margin: 30px auto; 拿掉就可以了
回覆 a007son | 1 月 8th, 2019

Ellen大你好，
我參考本文寫了一個圖片推入效果的CSS動畫
用瀏覽器預覽結果，動畫正常播放但總是最後一張圖片顯示在最上層
如果加入animation-fill-mode屬性
不論是backwards或both，只有第一回播放會是正確的
能不能麻煩你指導一下我哪裡寫錯了

CSS原始碼 https://pastebin.com/pkuw2utX
HTML原始碼 https://pastebin.com/1cJRyMmW
- 回覆 Ellen | 5 月 16th, 2019
  
  你少了圖片滑出的動作，可以參考將轉場效果變為左右滑動
回覆咪比 | 3 月 20th, 2019

你好
最近剛學做網頁
現在用GOOGLE的平台做得很有心得
現在想要做圖片輪播
但是一直無法實現理想

看了你的文章儘管我在複製貼上修修改改都無法達到您的輪播效果
想請您是否可以教學一下

以下是GOOGLE協作平台的嵌入訊息
“在協作平台上新增 HTML、CSS 或 JavaScript 程式碼
1. 使用電腦在新版 Google 協作平台中開啟協作平台。
2. 依序按一下右側的 [插入] 然後 [嵌入]。
3. 按一下 [嵌入程式碼]。
4. 新增程式碼，然後點選 [下一步]。
JavaScript 程式碼必須放在標記內。
CSS 程式碼必須放在標記內。”

第四點我也照做了但就是不行…
或許我的問題很淺….. 但真心想學習 …. 如能有答案我萬分感激(跪)
- 回覆 Ellen | 5 月 17th, 2019
  
  我沒有在用google協作平台哦，有網頁嗎？可以幫你看一下，找一下原因。
回覆 Mibee | 3 月 23rd, 2019

你好我已完成你教導的輪播了真是萬分感激從不會到會非常感動
現在有個問題想請教
請問做好的輪播圖片可以把它弄成響應式的嗎? 盼回復 ~非常感謝 ~~>///<
- 回覆 Ellen | 5 月 16th, 2019
  
  新增了響應式的範例，請笑納 ^^
  為純CSS的輪播動畫加上響應式效果
回覆 TINA | 3 月 25th, 2019

您好,這個程式有辦法改成動態輪播圖片嗎?
我要輪播前才指定圖片所在的資料夾，資料夾中的圖片檔都要一一輪播，有辦法改嗎？
- 回覆 Ellen | 5 月 16th, 2019
  
  您說的要靠js才有辦法做到，這個範例是純CSS的輪播，必須要先確認有幾組圖片，算好時間和動作才行。
回覆 Cherish | 4 月 12th, 2019

Ellen你好，謝謝您上方的教學，照著學習已經成功了^口^
另外想要請教大大以下問題:
1.因目前此語法是轉場是”淡出”的效果，請問這部分有辦法寫出其他效果嗎?(例如左右滑動之類的?)
2.雖然會自動輪播，但沒有左右箭頭可以手動切換，請問這個部分該如何另外寫左右箭頭的語法呢?(或是寫在下方變成輪播的點點，點擊可以手動切圖)
- 回覆 Ellen | 5 月 16th, 2019
  
  1. 左右滑動的效果請參考這裡：將轉場效果變為左右滑動
  2. 手動切圖就要用到js了，純CSS沒辦法達成。
回覆 Daniel | 5 月 24th, 2019

您好請問我在每張圖片上加上超連結，但圖片輪播時，超連結永遠只是最後一個連結，不知該如何修改?? 感謝!!
- 回覆 Ellen | 7 月 24th, 2019
  
  如果想要加上連結，要用滑動效果的版本才行。原始淡入淡出效果的版本, 最後一張圖始終壓在最上層，只是暫時隱藏而已。所以無論如何點擊都會點擊在最後一張圖上。
回覆 yao | 6 月 9th, 2019

請問可以讓我放在專題網頁嗎謝謝
- 回覆 Ellen | 7 月 24th, 2019
  
  放吧，記得幫我載明出處、宣傳一下就好 ^^
回覆 Adam | 6 月 27th, 2019

您好請問這個功能是否在IE當中會無法正常顯示呢
我在其他瀏覽器都使用正常只有IE會出現第一張圖之後無法顯示的問題

感謝您
- 回覆 Ellen | 7 月 24th, 2019
  
  在 IE 11上是ok的，文章最前面那個輪播就是一個範列，您可以直接用IE 11開這個網頁來試看看。純CSS3的圖片輪播效果
回覆 sam | 10 月 3rd, 2019

很不錯的介紹
但淡出淡入時間要自己算出來不太友好
- 回覆 Ellen | 10 月 27th, 2022
  
  因為是”純css”，所以要自己算
回覆 Alexandra | 11 月 15th, 2019

您好!想問一下，如果是放在封面要變大要如何修改?
我怎麼改px都不會變@@
- 回覆 Ellen | 10 月 27th, 2022
  
  如果您是使用響應式的版本、要去改rwd_slider_container_wrapper的寬度
回覆 Anson | 2 月 24th, 2020

請問可以讓我放在我的功課(專題網頁)嗎謝謝
- 回覆 Ellen | 10 月 27th, 2022
  
  請慢用
回覆 dong | 10 月 9th, 2020

想請教大神
.slider_container div {
-webkit-animation: round 25s linear infinite;
animation: round 25s linear infinite;
其中的round 是animation_name，而linear是代表捨麼意思？
- 回覆 Ellen | 10 月 27th, 2022
  
  linear 是動畫播放速度的曲線、表示等速變化。
回覆 dong | 10 月 9th, 2020

您好針對你上面寫的，我想要輪播八張圖，一張播3秒，過場時間1秒，一個完整週期是32秒，以下是我改的code，但發現在輪播時有一張圖第一次會出現，之後一直發生會少一張圖，可以幫我看看是哪出了問題嗎？

.coverflow {
width: 280px;
height:200px;
position: relative;
}
.coverflow div{
display: block;
position: absolute;
top:0%;
left:0%;
opacity: 0;
filter: alpha(opacity=0);

/*CSS3 Keyframes Animation*/
/*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
-webkit-animation: silder 32s linear infinite;
animation: silder 32s linear infinite;
}
/*.coverflow>a>img{
max-width: 100%;
}
/*動畫關鍵影格*/
@-webkit-keyframes silder { /*多了可以支持safari、ios、android*/
3.125% {
opacity: 1;
filter: alpha(opacity=100);
}
12.5% {
opacity: 1;
filter: alpha(opacity=100);
}
15.625% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes silder { /*只能支持IE、Firefox、chrome*/
3.125% {
opacity: 1;
filter: alpha(opacity=100);
}
12.5% {
opacity: 1;
filter: alpha(opacity=100);
}
15.625% {
opacity: 0;
filter: alpha(opacity=0);
}
}
/*每個圖片各延遲5秒*/
div.coverflow div:nth-child(8) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
div.coverflow div:nth-child(7) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
div.coverflow div:nth-child(6) {
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
div.coverflow div:nth-child(5) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
div.coverflow div:nth-child(4) {
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
div.coverflow div:nth-child(3) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
div.coverflow div:nth-child(2) {
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
div.coverflow div:nth-child(1) {
-webkit-animation-delay: 28s;
animation-delay: 28s;
}
/*滑入時停止播放*/
div.coverflow:hover div{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
- 回覆 Ellen | 10 月 27th, 2022
  
  檢查看看html的部份、是不是放了超過8張的圖
回覆 Nate | 8 月 2nd, 2021

想請問一下若是想要加入左右控制的js效果，是不是code就會完全不一樣了呢？
- 回覆 Ellen | 10 月 27th, 2022
  
  從學習的角度來說，可以在現有的基礎上再加上javascript,
  從實作的角度來說，找現有的套件會比較實在。
回覆卓小柴犬 | 9 月 12th, 2022

您好，HTML img size 圖片尺寸可以透過width和height來設定，
所以我想要調整所有圖片的尺寸，請問css要怎麼寫呢？謝謝。
就是說我原本圖片都是１０８０Ｘ２２８０，
我想把他們在網頁上是３６０Ｘ７６０之類～
- 回覆 Ellen | 10 月 27th, 2022
```
img {
    width: 360px !important;
    height: 360px !important;
}
```
  加個!important 強制覆寫。

網頁前端開發資訊