資源分享：異常強大的預(yù)設(shè)css3動畫庫Animate

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

網(wǎng)址：http://daneden.github.io/animate.css/

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

先看下幾個效果：

是不是看起來很炫酷，當(dāng)然使用方法相當(dāng)?shù)暮唵危恍枰獙ο鄳?yīng)的節(jié)點添加class就可以了。沒有使用的同學(xué)強烈建議嘗試一下。

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

一、功能說明

1.1 功能介紹

實現(xiàn)一個漸隱漸現(xiàn)的輪播圖；
可以自動切換，也可以鼠標(biāo)點擊翻頁按鈕或者小圓點進(jìn)行切換；
同時鼠標(biāo)移動到圖片上停止自動切換，鼠標(biāo)移出圖片恢復(fù)自動切換。

1.2 效果圖如下

漸隱漸現(xiàn)輪播圖效果

二、HTML和CSS結(jié)構(gòu)

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

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS寫一個漸隱漸現(xiàn)輪播圖</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%;
}

/* 設(shè)置默認(rèn)顯示的圖片(第一張) */
.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 {
    /* 轉(zhuǎn)成行內(nèi)塊元素: 即能水平排列,雙支持寬度設(shè)置 */
    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;   
}

目前頁面的基礎(chǔ)效果都已經(jīng)完成了，效果是這樣的：

輪播圖默認(rèn)效果

三、JavaScript代碼

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

// 獲取相關(guān)容器元素
// 輪播圖容器
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');

至于分頁小圓點按鈕，我個人認(rèn)為應(yīng)該根據(jù)輪播圖片的數(shù)量去動態(tài)生成它，因此我是這樣寫的：

// 創(chuàng)建分頁小圓點，首先創(chuàng)建文檔片段
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);
// 為第一個分頁圓點添加默認(rèn)樣式
paginations.firstElementChild.classList.add('active');

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

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

3.1 實現(xiàn)自動輪播的效果

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

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

代碼實現(xiàn)

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

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

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

分頁圓點bug

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

代碼實現(xiàn)

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

這樣就可以實現(xiàn)圖片和圓點切換一致地進(jìn)行了。

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

代碼實現(xiàn)

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

截止到目前為止，上面的代碼已經(jīng)實現(xiàn)了圖片的漸隱漸現(xiàn)效果，以及鼠標(biāo)滑入滑出暫停和恢復(fù)切換的效果。下面需要做的就是實現(xiàn)手動點擊切換事件。

3.2 點擊翻頁按鈕實現(xiàn)切換效果

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

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

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

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

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

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

實現(xiàn)原理：通過給每個小圓點添加一個點擊事件，通過判斷當(dāng)前點擊的小圓點的位置索引，切換到對應(yīng)的圖片即可。

代碼實現(xiàn)

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

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

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

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

“一邊是不干凈的空調(diào)，另一邊卻是無法稀釋的環(huán)境。”檢驗檢疫工作人員告訴筆者，集中空調(diào)通風(fēng)系統(tǒng)因其相對密閉性，通風(fēng)不良或新風(fēng)供應(yīng)不足，都會使室內(nèi)空氣中的有害物質(zhì)得不到及時稀釋，進(jìn)而損害人體的健康。

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

怎樣才能把中央空調(diào)洗干凈呢？根據(jù)國家標(biāo)準(zhǔn)要求，專業(yè)的集中空調(diào)清洗分為１１個步驟。“合格的空調(diào)清洗，意味著在空調(diào)管道的表面，手摸過之后看不到粘有明顯的灰塵。”業(yè)內(nèi)專業(yè)人士介紹說，經(jīng)過清洗后的中央空調(diào)，風(fēng)機盤管口送出的冷暖氣清新、優(yōu)質(zhì)。

據(jù)介紹，經(jīng)過專業(yè)清洗消毒，室內(nèi)空氣中的可吸入顆粒物濃度一般能下降到０．０４ｍｇ／ｍ３以下，而市民目前普遍采用的“自來水＋洗潔精”清洗方式則很難使集中空調(diào)送風(fēng)中的細(xì)菌總數(shù)、真菌總數(shù)、軍團(tuán)菌指標(biāo)達(dá)到國家相關(guān)標(biāo)準(zhǔn)的要求。

在線咨詢

上一篇：這樣制作日報，從此告別加班！（下）：郵件合并
下一篇：手把手教你用vue 編寫一個日歷組件「實踐」

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商