關於圖片輪播的幾種思路

圖片輪播我們經常在眾多網站中看到，各種輪播特效在有限的空間上展示了幾倍於空間大小的內容，並且有着良好的視覺效果。很多初學js的小伙伴都會拿這個來練習。我也不例外，所以在此分享幾個我寫輪播圖的過程，代碼不足之處請多指教哦，相互學習。

好了，先來說第一種輪播特效：

就是通過修改每一張圖片的透明度，讓其每隔一段時間將其中的某一張圖片透明度設為1，而其它的設為0，從而實現一種圖片輪流播放的效果。

這種效果的思路比較簡單，首先讓一組圖片絕對定位，讓其重疊在一起，然后通過一個函數來控制圖片的透明度變化。同時還有一個定時器，不停的除發這個函數，每次改變不同圖片的透明度，讓其顯示。（更簡單的效果是直接修改display屬性，讓該顯示的圖片display:block,而不顯示的設為display:none就可以，只是效果上會差一些，但原理相同）

首先來看Html結構代碼：

<ul id="pictures">
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
</ul>

對其進行樣式調整之后，圖片都在同一個位置，可以先給第一張圖片設置為顯示，而其它的圖片設為不顯示。

下面來看js的代碼：

/*
關於插件的一些說明：
parentID:是指父容器的id，最好是一個無序列表ul的id。
childTag:是父容器里面包裹每一個圖片的標簽名，在無序列表里可以是li。
使用此插件要想有一個圖片透明度漸進改變的效果，要給包裹圖片的標簽一個樣式，如下：
transition: opacity 1s ease-in-out;
可以對這個transition就行相應的修改；
建議使用此插件的Html結構如下：
<ul id="parentId">
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
</ul>
此時：parentId即為ul的id;
      childTag即為li;
*/

var autoPlay=function(parentID,childTag) {
    var pictures = document.getElementById(parentID);
    var items = pictures.getElementsByTagName(childTag);
    var len=items.length;
    var index = 0;
    showItem();
    // 顯示一張圖片
    function showItem() {
        // 首先將所有圖片透明度設為0
        hideItems();
        items[index].style.opacity = 1;
        // 將要顯示的透明度改變讓其顯示
        if (index > len - 2) {
            index = 0;
        } else {
            index++;
        }
        // 在這里用setTimeout模擬setInterval的效果
        setTimeout(showItem, 2500);
    }
    // 將所有圖片透明度設為0
    function hideItems() {
        for (var i = 0; i < len; i++) {
            items[i].style.opacity = 0;
        }
    }
};

這樣調用該插件即可：autoplay.js是我將這個插件保存到本地的一個文件。

<script type="text/javascript" src="./autoplay.js"></script>
    <script type="text/javascript">
        autoPlay('pictures','li');
    </script>

 這里面實現的時候結合了css3的transition屬性，讓代碼更簡潔，動畫效果也更好。關於transition的兼容我代碼中並沒有加前綴，需要的小伙伴們可以自行加上，這里只演示一個實現過程。

第二種輪播特效：

這一種是滑動形式的，通過改變元素的left值讓圖片呈現左右滾動的效果。

html結構式這樣子的：

<ul id="pictures">
            <li><img src=""></li>
            <li><img src=""></li>
            <li><img src=""></li>
            <li><img src=""></li>
        </ul>

js插件代碼是這樣子的：

var autoSlide = function(parentId, childTag) {
    var parent = document.getElementById(parentId);
    // 這里將元素的position設為relative，這樣才可以對left值進行改變，當然也可以設為absolute
    parent.style.position = "relative";
    var items = parent.getElementsByTagName(childTag);
    var width = items[0].offsetWidth;
    var index = 0;
    function slide() {
        if (index > items.length - 2) {
            index = 0;
        } else {
            index++;
        }
        moveWidth = -width * index;
        parent.style.left = moveWidth + "px";
        setTimeout(slide, 1500);
    }
    slide();
};

插件的調用方式和上面第一種的一樣，因為原理都差不多，同樣結合了css3的動畫實現，所以就不贅述原理了。

還有一種是無縫輪播方式，就個人感覺這種的顯示效果最好。