資源分享：異常強大的預設css3動畫庫Animate

個css庫我覺得沒有幾個前端童鞋不知道吧！Animate.css可以說在各大網站等使用頻繁。

網址：http://daneden.github.io/animate.css/

文件大小僅僅只有71k，不要覺得它大，它里面包含了將近80中的動畫效果，在你的網站中足夠一些常用的動畫效果了。分為了什么漸入，漸出，放大，縮小等幾個類別。

先看下幾個效果：

是不是看起來很炫酷，當然使用方法相當的簡單，只需要對相應的節點添加class就可以了。沒有使用的同學強烈建議嘗試一下。

近工作學習時間很忙，好久沒有更新頭條文章了，利用今天周日，使用原生的JavaScript寫了一個漸隱漸現的輪播，算是對最近的前端學習的一個小總結吧。下面我來分享一下我寫這個功能的步驟以及經驗總結。

一、功能說明

1.1 功能介紹

實現一個漸隱漸現的輪播圖；
可以自動切換，也可以鼠標點擊翻頁按鈕或者小圓點進行切換；
同時鼠標移動到圖片上停止自動切換，鼠標移出圖片恢復自動切換。

1.2 效果圖如下

漸隱漸現輪播圖效果

二、HTML和CSS結構

圖片容器：這里我放了4張美女圖，為啥用這個，因為養眼。（手動滑稽）
分頁容器：就是那幾個小圓點，可以切換每一張圖片。
翻頁按鈕：輪播圖左右兩邊的按鈕，也可以切換圖片。

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS寫一個漸隱漸現輪播圖</title>
    <link rel="stylesheet" href="slider.css">
</head>
<body>
    <div class="container">
        <!-- 1. 輪播圖片組 -->
        <div class="imgs">
            <a href="" class="slider"><img src="./images/1.jpg" class="active" /></a>
            <a href="" class="slider"><img src="./images/2.jpg" /></a>
            <a href="" class="slider"><img src="./images/3.jpg" /></a>
            <a href="" class="slider"><img src="./images/4.jpg" /></a>
        </div>
        <!-- 2. 小圓點按鈕 -->
        <div class="paginations"></div>
        <!-- 3. 翻頁按鈕 -->
        <div class="skip">
            <a href="#" class="prev"><</a>
            <a href="#" class="next">></a>
        </div>
    </div>
    <script src="slider.js"></script>
</body>
</html>

CSS代碼

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

a {
    text-decoration: none;
}

/* 輪播圖的容器 */
.container {
    width: 75em;
    height: 42rem;
    margin: 1em auto;
    position: relative;
    overflow: hidden;
}

/* 輪播圖片組 */
.container .imgs {
    width: 75rem;
    height: 42rem;
    overflow: hidden;
}

.container .imgs a {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 0;
    transition: all .6s;
}

.container .imgs a img {
    width: 100%;
    height: 100%;
}

/* 設置默認顯示的圖片(第一張) */
.container>.imgs a:nth-of-type(1) {
    opacity: 1;
    z-index: 1;
}
.container>.paginations {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    /* 水平居中 */
    text-align: center;
    z-index: 99;
}

.container>.paginations a {
    /* 轉成行內塊元素: 即能水平排列,雙支持寬度設置 */
    display: inline-block;
    padding: .8rem;
    margin: 0 0.5em;
    background-color: #fff;
    border-radius: 50%;
    transition: all .5s;
}

.container>.paginations a.active {
    background-color: #000;
}

/* 翻頁按鈕 */
.container .skip a {
    position: absolute;
    z-index: 99;
    width: 2.5rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    opacity: 0.5;
    top: 50%;
    margin-top: -2.5rem;
    font-size: 2rem;
    background-color: #ccc;
    transition: all .6s;
}

.container .skip .prev {
    left: 0;
}

.container .skip .next {
    right: 0;
}

.container .skip *:hover {
    opacity: 0.9;
    color: #666;   
}

目前頁面的基礎效果都已經完成了，效果是這樣的：

輪播圖默認效果

三、JavaScript代碼

首先，在做我們的輪播效果之前，我們需要先拿到相關的元素。

// 獲取相關容器元素
// 輪播圖容器
const container=document.querySelector('.container');
// 圖片容器
const imgs=document.querySelector('.imgs');
// 每一張圖片元素
const sliderLists=document.querySelectorAll('.slider');
// 小圓點容器元素
const paginations=document.querySelector('.paginations');
// 上翻頁按鈕
const prevBtn=document.querySelector('.prev');
// 下翻頁按鈕
const nextBtn=document.querySelector('.next');

至于分頁小圓點按鈕，我個人認為應該根據輪播圖片的數量去動態生成它，因此我是這樣寫的：

// 創建分頁小圓點，首先創建文檔片段
let frag=document.createDocumentFragment();
for (let i=0; i < sliderLists.length; i++) {
    const a=document.createElement('a');
    a.href='javascript：;';
    a.class='btn';
    frag.appendChild(a);
}
// 將生成的文檔碎片掛載到paginations下
paginations.appendChild(frag);
// 為第一個分頁圓點添加默認樣式
paginations.firstElementChild.classList.add('active');

分頁圓點元素渲染出來之后，先拿到它所有的元素以備后面做點擊切換圖片的事件使用。

let paginationBtns=document.querySelectorAll('.paginations a');

3.1 實現自動輪播的效果

由于我做的是漸隱漸現的效果，所以需要控制元素的z-index和opacity兩個屬性的值即可。

實現原理是：哪張圖片顯示，就把該元素的z-index和opacity值都設置成1，把需要隱藏的元素的z-index和opacity值都設置成0即可。這時，就需要兩個值來記錄當前圖片的位置，和上一張圖片的位置。至于自動切換效果，我是利用定時器實現的。

代碼實現

// prev 上一張圖片的位置，curr 當前圖片的位置。默認顯示第一張圖片。
let prev=0, curr=0;
// 自動切換圖片，由于此方法后面還需要再次使用，這里我就封裝成了一個函數。
let autoSwitchImg=function () {
    // 記錄上一張圖片的索引值，默認從0開始，即：第一張圖片
    prev=curr;
    // 上一張圖片的索引自增1，就是下一張要顯示的圖片，即當前圖片。
    curr++;
    // 判斷當前的索引值是不是大于圖片的總數，大于的話就從0開始，即第一張圖片開始輪播，
    // 否則繼續向下一張圖片切換。
    curr=curr >=sliderLists.length ? 0 : curr;
    switchImg();
};
// 利用定時器設置自動輪播，這里我默認的是3s自動切換。
let interval=setInterval(autoSwitchImg, 3000);

這里有一點需要注意的是：自動切換函數autoSwitchImg()一定在寫在定時器之前，否則會報錯。

代碼寫到這里已經完成了自動切換的效果了。但是會發現有個問題，就是分頁小圓點不會跟隨著圖片進行切換，那是因為我還沒實現它的邏輯。現在開始實現這個分頁按鈕跟隨對應的圖片進行切換的邏輯。

分頁圓點bug

分頁小圓點的實現原理是：我們先利用上面拿到的小圓點元素，用forEach()去遍歷每一個元素，如果當前圖片的位置索引等于小圓點的位置索引（curr===index），那么就給這個圓點添加上一個active類實現切換效果。值得注意的是，我們拿到的小圓點的元素是一個NodeList類數組，需要先轉換成數組再使用。具體請看下面的代碼實現。

代碼實現

// 讓分頁按鈕跟圖片索引對應
let switchPaginateBtn=function () {
    Array.from(paginationBtns).forEach((item, index)=> {
        curr===index ? item.className='active' : item.className='';
    });
};

這樣就可以實現圖片和圓點切換一致地進行了。

以上是自動切換圖片的功能，如果我們想實現鼠標移入輪播海報上停止自動切換，鼠標移除再恢復自動切換應該怎么辦呢？可以利用鼠標移入(onmouseenter)、移出(onmouseleave)事件進行操作。

代碼實現

// 鼠標移入輪播區域取消自動輪播
container.addEventListener('mouseenter', ()=> {
    clearInterval(interval);
    interval=null;
});
// 鼠標移出輪播區域開始自動輪播
container.addEventListener('mouseleave', ()=> {
    interval=setInterval(autoSwitchImg, 3000);
});

截止到目前為止，上面的代碼已經實現了圖片的漸隱漸現效果，以及鼠標滑入滑出暫停和恢復切換的效果。下面需要做的就是實現手動點擊切換事件。

3.2 點擊翻頁按鈕實現切換效果

上一頁翻頁按鈕與自動切換圖片的邏輯剛好相反，拿到當前圖片的索引，減去1就是上一張圖片的索引，也就是要切換到當前圖片的索引值。

// 上一頁
prevBtn.addEventListener('click', ()=> {
    // 保存當前圖片的索引
    prev=curr;
    // 上一張圖片就是當前圖片的索引值-1
    curr--;
    curr=curr < 0 ? sliderLists.length - 1 : curr;
    switchImg();
});

下一頁翻頁按鈕與自動切換圖片的邏輯完全一樣，只需要調用一下自動切換的邏輯即可

// 下一頁
nextBtn.addEventListener('click', ()=> {
    autoSwitchImg();
});

通過給翻頁按鈕添加以上兩個點擊事件，已經完成了點擊切換圖片的功能了，下面再聊一聊如何通過點擊分頁小圓點切換圖片的功能。

3.3 點擊分頁小圓點切換圖片

實現原理：通過給每個小圓點添加一個點擊事件，通過判斷當前點擊的小圓點的位置索引，切換到對應的圖片即可。

代碼實現

// 點擊分頁小圓點切換圖片
Array.from(paginationBtns).forEach((item, index)=> {
    item.addEventListener('click', ()=> {
        // 保存當前圖片的位置索引
        prev=curr;
        // 將當前點擊的小圓點的位置索引值賦值給的需要顯示的圖片變量
        curr=index;
        // 調用切換圖片函數，實現切換效果
        switchImg();
    });
});

以上就是我寫這個漸隱漸現輪播圖的全部過程，如果有寫得不好的地方，請各位大佬批評指正，如果有跟我一樣的初學者想看完整代碼的同學，可以關注私信我并回復“輪播”獲取源碼。

rl:http://daily.cnnb.com.cn/nbrb/html/2015-05/08/content_859241.htm?div=-1,id:0 本報訊（記者張正偉通訊員李杰陳歡何勤）氣溫逐日上升，甬城各大寫字樓、商場、超市的中央空調經過數月“冬眠”，又開始了忙碌的工作。但近日國家相關部門對北京、上海等地的抽檢發現，中央空調清洗率不足１％；寧波檢驗檢疫局衛生監督人員發現，多年不清洗空調的樓宇管道里除了大堆大堆的灰塵，竟然還發現了死蟑螂、死老鼠等媒介生物?！翱照{重啟之前最好對其進行一次大掃除?！睓z驗檢疫工作人員提醒市民。

好多市民或許有過這樣的經歷，好端端在辦公室工作，染病的幾率卻比在戶外高好幾倍。這個罪魁禍首，就是中央空調吹送的污濁空氣。寧波檢驗檢疫局相關工作人員告訴筆者，空調使用一年以上，其內部可能會積聚螨蟲、灰塵、霉菌、花粉等污垢。除此之外，空調風管內部還附著大量的蠟樣芽孢桿菌、霉菌、金黃色葡萄球菌等致病菌?？照{運行時，污染物及滋生的微生物有可能在集中空調系統內部迅速擴散，使集中空調通風系統成為傳播、擴散污染物和微生物的媒介。

“一邊是不干凈的空調，另一邊卻是無法稀釋的環境。”檢驗檢疫工作人員告訴筆者，集中空調通風系統因其相對密閉性，通風不良或新風供應不足，都會使室內空氣中的有害物質得不到及時稀釋，進而損害人體的健康。

“空調系統冷卻塔應保持清潔、每年清洗一次”、“空調系統清潔（洗）后的清潔程度應達到每平方米管道表面積塵量小于等于２０克”……其實，為了保證室內空氣質量，國家專門出臺了《公共場所集中空調通風系統衛生規范》、《公共場所衛生管理條例實施細則》等法律法規，對中央空調衛生指標和公共場所經營者清洗中央空調責任作出了明確規定。但由于清洗較困難且需要一定的費用，目前甬城多數樓宇的物業管理者沒有認真執行相關規定。而且，由于空調清洗公司良莠不齊，存在諸多不科學、不規范的作業現象。

怎樣才能把中央空調洗干凈呢？根據國家標準要求，專業的集中空調清洗分為１１個步驟?！昂细竦目照{清洗，意味著在空調管道的表面，手摸過之后看不到粘有明顯的灰塵?！睒I內專業人士介紹說，經過清洗后的中央空調，風機盤管口送出的冷暖氣清新、優質。

據介紹，經過專業清洗消毒，室內空氣中的可吸入顆粒物濃度一般能下降到０．０４ｍｇ／ｍ３以下，而市民目前普遍采用的“自來水＋洗潔精”清洗方式則很難使集中空調送風中的細菌總數、真菌總數、軍團菌指標達到國家相關標準的要求。

在線咨詢

上一篇：這樣制作日報，從此告別加班?。ㄏ拢亨]件合并
下一篇：手把手教你用vue 編寫一個日歷組件「實踐」

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商