用CSS3 transition屬性實現淡入淡出輪播圖

最近想本身寫下輪播圖，在網上發現一個網友用CSS transition屬性實現的輪播，趕腳超簡單哦，本身學習了後整理以下。（找不到原網址了-.-...就不貼了...）
（若是不瞭解transition，先去這裏（點我，點我）學習下）

思路

圖片淡入淡出效果是不透明度（CSS opacity屬性）的變換過程。舉例，讓圖片淡出，就是圖片的opacity屬性在一段時間內逐漸從1變爲0，淡入呢，則是圖片的opacity屬性在一段時間內逐漸從0變爲1，用transition能夠輕鬆實現啊。

咱們設置圖片的CSS樣式以下，先不考慮佈局和寬高這些。

img{
  opacity: 0;
  transition: opacity 1s;
}
img.active{
  opacity: 1;
}

這段CSS能實現什麼呢？

一開始，img的opacity爲0，因此咱們看不見。若是咱們用JS給img加上active類，img的opacity就要變成1對吧，因爲有transition屬性，因此要等1s，opacity才能徹底變爲1，實現了淡入。

那淡出呢？你想下，等img淡入完了以後，我又用JS刪掉img的active類會怎麼樣？這時候img的opacity應該從1變爲0對吧，又因爲有transition屬性，因此opacity要等1s才能變爲0，這就實現了淡出。

JS的setInterval(code,millisec)（點我學習該函數）能夠每隔一段時間就執行指定代碼。若是我每隔1s就更改下img的類名，若是有active類就刪掉，若是沒有就加上，這樣圖片就不斷地淡入 → 淡出 → 淡入 → 淡出。

怎麼實現多張圖片輪流淡入淡出呢？

你每次刪掉當前圖片的active類（淡出），而後給下一張圖片加上active類（淡入），這樣就實現了圖片的切換。

剩下的就是每隔固定時間間隔，執行切換圖片函數就好了。

先上兩個效果圖。

點我跳轉CodePen看本文代碼最終效果，打開可能有點慢，耐心等等。這個是圖片自動輪播，也能夠經過圖片底部的頁碼選擇圖片。

點我跳轉看稍微變更後的另外一種效果（這是仿的京東首頁輪播圖效果，鼠標滑到圖片上時會顯示左右按鈕框，點擊左右按鈕框也可實現圖片切換。）

只有圖片的輪播

HTML比較簡單，就是一個<div>裏面扔三個<img>（假設是三張輪播圖哈）。第一張圖片已經加上了active類，這樣網頁加載的時候就會有圖片，經過JS來添加active類初始化比較慢，要等JS加載。

<div id="slideshow">
  <!-- 插入輪播的圖片們 -->
  <img class="active" src="http://img.kumi.cn/photo/01/69/30/016930f03d2e34cc.jpg" />
  <img src="http://image2.sina.com.cn/dongman/pic/chshidzrcji/U1595P55T4D115697F50DT20070406083109.jpeg" />
  <img src="http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg" />
</div>

CSS以下。設置好<div id="slideshow">和<img>的尺寸，讓<img>重疊在一塊兒，而且opacity爲0。而具備active類的<img>的opacity爲1。固然，別忘了設置transition: opacity 1s linear;。

*{
  padding: 0;
  margin: 0;
}
#slideshow{
  width: 800px;  
  height: 350px;
  margin: 0 auto; /*設置在頁面水平居中*/
  overflow: hidden;
  position: relative;  
}
#slideshow img{
  width: 800px;
  position: absolute; /*圖片採起絕對定位，均位於左上角，重疊在一塊兒*/
  top: 0;
  left: 0;
  opacity: 0; /*初始不透明度爲0，圖片都看不見*/
  transition: opacity 1s linear; /*--重點--定義一個關於透明度的transition*/
}
#slideshow img.active{
  opacity: 1; /*有active類的圖片不透明度爲1，即顯示圖片*/
}

JS以下。在輪播函數slideshow()裏，定義了圖片淡出函數slideOff()，圖片淡入函數slideOn()和切換圖片函數changeSlide()。

//---------主角：輪播圖函數-------------
function slideshow() {
  var slideshow=document.getElementById("slideshow"),
  imgs=slideshow.getElementsByTagName("img"), //獲得圖片們
  current=0; //current爲當前活躍的圖片編號

  function slideOff() {
    imgs[current].className=""; //圖片淡出
  }
  function slideOn() {
    imgs[current].className="active"; //圖片淡入
  }

  function changeSlide() { //切換圖片的函數
    slideOff(); //圖片淡出
    current++; //自增1
    if(current>=3) current=0;
    slideOn(); //圖片淡入
  }
  
  //每2s調用changeSlide函數進行圖片輪播
  var slideon=setInterval(changeSlide,2000);  
}

slideshow();

這裏有個問題哦，輪播圖通常鼠標移入圖片後，輪播就中止了，當鼠標移出後，輪播又開始對吧。咱們用JS的onmouseover和onmouseout來實現。

在JS的slideshow()函數中加入如下代碼便可。

slideshow.onmouseover=function () {
  clearInterval(slideon); //當鼠標移入時清除輪播事件
}
slideshow.onmouseout=function () {
  slideon=setInterval(changeSlide,2000); //當鼠標移出時從新開始輪播事件
}

具體效果見CodePen連接。

加上頁碼

恩，而後咱們加上和每張圖片相對應的頁碼，並實現鼠標移上去就會顯示相應圖片這個功能。

在HTML的<div id="slideshow">中要添加以下。

<!-- 插入輪播的頁碼們 -->
<div>
  <span class="active">1</span>
  <span>2</span>
  <span>3</span>
</div>

第一個<span>我也是已經添加了active類。

而後設置頁碼的樣式，讓它們位於圖片的底部，一字排開。

/* 設置頁碼的樣式 */
#slideshow div{
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
}
#slideshow span{
  display: inline-block;
  width: 25px;
  line-height: 25px;  /*當只有一行文本時height等於line-height*/
  border-radius: 25px;  /*設置頁碼爲圓形*/
  margin: 0 15px;  
  background: white;
  font-size: 16px;
}
#slideshow span.active{
  color: white;
  background: #FFDD55;
}

在JS中，slideOff()和slideOn()函數都要更新下，由於淡入淡出時<span>的類名也要進行變動。

function slideOff() {
  imgs[current].className=""; //圖片淡出
  pages[current].className="";
}
function slideOn() {
  imgs[current].className="active"; //圖片淡入
  pages[current].className="active";
}

再就是鼠標移入<span>時，須要顯示對應的圖片對吧。咱們先把當前圖片淡出，而後獲得當前<span>對應的current，再讓圖片淡入就好啦。

for(var i=0; i<pages.length; i++) { //定義鼠標移入和移出頁碼事件
  pages[i].onmouseover=function(){
    slideOff(); //圖片淡出
    current=this.innerHTML-1; //獲得鼠標停留的頁碼對應的current
    slideOn(); //圖片淡出
  }
}

具體效果見CodePen連接。

加上圖片描述

描述文字我設成了橫着進入橫着出去效果。怎麼實現的呢？有點像滑動式的輪播圖其實。

文本我設成position: absolute;，而後是否是能夠經過更改left值來進行橫向移位呢，再結合transition造成動畫效果就好啦。

HTML須要增長以下。

<!-- 插入圖片的描述們 -->
<p class="active">這是第一幅圖片哈哈哈</p>
<p>這是第二幅圖片咩</p>
<p>到第三幅了！</p>

對文本設置樣式。注意看left和transition。left爲負值是什麼意思呢？left爲0就是緊挨着#slideshow左側對吧，爲負的話就是繼續往左移越過左側啦。

/*-- 設置圖片描述文本的樣式 --*/
#slideshow p{
  position: absolute;
  top: 30px;
  left: -400px; /*相對於輪播圖左側左移400px*/
  line-height: 30px;
  padding: 5px 30px;
  font-size: 20px;
  color: white;
  background-color: rgba(100,100,100,0.6); /*用rgba設置一個帶透明度的背景顏色*/
  opacity: 0;
  transition: all 0.5s;
}
#slideshow p.active{
  left: 0;
  opacity: 1;
}

JS很簡單，更新下slideOff()和slideOn()函數。

function slideOff() {
  imgs[current].className=""; //圖片淡出
  pages[current].className="";
  descrips[current].className="";
}
function slideOn() {
  imgs[current].className="active"; //圖片淡入
  pages[current].className="active";
  descrips[current].className="active";
}

具體效果見CodePen連接。

還能夠完善的幾點

一是，輪播圖通常是能夠點的連接，因此<img>應該是嵌套在<a>裏面的，這裏我偷懶了。二是，當鼠標移到<span>的文字上時，光標變成了工字型（cursor: text;），由於光標是默認設置，在文本上時就變了，咱們能夠在<span>的CSS中設置cursor: Default;，這樣就一直是普通的鼠標樣式了。三是，<span>的文字若是雙擊是能夠選中的，比較醜，咱們加上下面的代碼讓文本不能被選取就行了。

/*設置不能選擇文本*/
-ms-user-select:none;/*IE10*/
-webkit-user-select:none;/*webkit瀏覽器*/
user-select:none;

---

完。