案例｜原生手寫一個輪播圖——漸隱漸顯版

時間  2020-04-25
標籤 案例 原生 手寫 一個 漸隱 漸顯 简体版
原文   原文鏈接

今天咱們本身手寫一個漸隱漸顯版的輪播圖，先上效果圖👇javascript

因爲文件太大，只能壓縮成這樣給你們看了😓css

既然不能傳大文件，那你們就委屈一下先聽聽小芝麻描述一下具體的需求吧😄html

1、需求

❝

一、實現漸隱漸顯自動輪播效果；java

❞

就如上面效果圖同樣；web

❝

二、鼠標劃上：瀏覽器

  • 顯示左右切換箭頭
  • 中止自動輪播；
❞

如圖：此時小芝麻鼠標在圖上，因此顯示左右箭頭，而且再也不自動輪播 app

❝

三、鼠標離開:編輯器

  • 隱藏左右切換箭頭
  • 繼續自動輪播；
❞

與👆效果圖一致ide

❝

四、點擊左右箭頭實現上下切換圖片函數

❞

如圖：

❝

五、點擊分頁器跳轉相應圖片

❞

如圖：小芝麻點擊了第三個分頁器，娜美就出來了😄

好了如今需求已經提完了，開始咱們表演的時候到了

2、代碼實現

HTML

結構中咱們須要：

  • 圖片容器
    • 這裏小芝麻放了6張圖片着實有點多，但看見哪一張都捨不得刪😭因此看着有些亂；
    • 小夥伴們可根據本身的需求調整
  • 分頁器容器
  • 左右按鈕容器

便可

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>金色小芝麻—漸隱漸顯版輪播圖-原生</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 輪播圖容器 -->
    <div class="container">
        <!-- WRAPPER存放全部的圖 -->
        <div class="wrapper">
            <!-- SLIDER每個輪播圖 -->
            <div class="slider">
                <img src="images/banner1.jpg" alt="">
            </div>
            <div class="slider">
                <img src="images/banner2.jpg" alt="">
            </div>
            <div class="slider">
                <img src="images/banner3.jpeg" alt="">
            </div>
            <div class="slider">
                <img src="images/banner4.jpeg" alt="">
            </div>
            <div class="slider">
                <img src="images/banner5.jpeg" alt="">
            </div>
            <div class="slider">
                <img src="images/banner6.jpg" alt="">
            </div>
        </div>

        <!-- PAGENATION分頁器 -->
        <ul class="pagination">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <!-- 左右按鈕 -->
        <a href="javascript:;" class="arrow changeLeft"></a>
        <a href="javascript:;" class="arrow changeRight"></a>
    </div>

    <!-- IMPORT JS -->
    <script src="js/index.js"></script>
</body>

</html>
複製代碼

如今是這樣的： 接下來咱們開始調整樣式

CSS

樣式這裏小夥伴們可根據本身的需求和審美盡情的創做😄

小芝麻的審美有限，就簡簡單單的完成需求就行了😜

.container {
    position: relative;
    margin: 50px auto;
    width: 800px;
    height: 400px;
    overflow: hidden;
}

.container .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.container .wrapper .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    opacity: 0;
    transition: all .3s;
}

/* 默認顯示第一張圖片 */

.container .wrapper .slider:nth-child(1) {
    opacity: 1;
    z-index: 1;
}

.container .wrapper .slider img {
    width: 100%;
    height: 100%;
}

/* 分頁器 */

.pagination {
    position: absolute;
    z-index: 999;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    font-size: 0;
    border-radius: 26px;
}

.pagination li {
    display: inline-block;
    margin: 0 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.pagination li.active {
   background: red;
}

/* 左右按鈕 */

.arrow {
    display: none;
    position: absolute;
    z-index: 999;
    top: 50%;
    margin-top: -22.5px;
    width: 30px;
    height: 45px;
    background: url(../images/pre.png) no-repeat 0 0;
}

.arrow.changeLeft {
   left: 0;
}

.arrow.changeRight {
    right: 0;
    background-position: -50px 0;
}

.container:hover .arrow {
   display: block;
}
複製代碼

左右切換按鈕，小芝麻是以背景圖的方式插入的，這裏提供給你們

如今咱們來預覽下效果

已經成型，接下來咱們繼續實現交互便可

JS交互

在作需求以前，咱們須要先把即將要操做的元素都獲取到；

// 獲取須要操做的元素
    //最外層輪播圖容器
let container = document.querySelector('.container'),
    //包裹全部圖片的容器
    wrapper = container.querySelector('.wrapper'),
    // 全部圖片的集合
    sliderList = wrapper.querySelectorAll('.slider'),
    // 分頁器容器
    pagination = container.querySelector('.pagination'),
    // 每個分頁器的li標籤集合
    paginationList = pagination.querySelectorAll('li'),
    // 左側按鈕
    changeLeft = container.querySelector('.changeLeft'),
    // 右側按鈕
    changeRight = container.querySelector('.changeRight');
複製代碼

元素都獲取完了咱們就來按照需求一步一步的進行；

需求一：實現漸隱漸顯自動輪播效果

思路分析

❝

漸隱漸顯效果：改變相應圖片的z-index和opacity兩個屬性便可

  • 想讓哪張圖片顯示，就讓哪張圖片的 z-index和 opacity爲 1；
  • 同時讓其餘圖片的 z-index和 opacity爲 0便可；

自動輪播效果：利用定時器

❞

咱們先來實現一下代碼：

代碼實現

// 須要用到定時器，設置定時器和切換時間初始值
let autoTimer = null,
    interval = 3000,
    prev = 0,
    step = 0;
    
// 由於在後面還會用到，因此這裏對切換的效果作了一個函數封裝
//切換函數封裝
let change = function change() {
    // 讓上一張不顯示
    sliderList[prev].style.zIndex = '0';
    sliderList[prev].style.opacity = '0';

    // 讓當前張過渡顯示
    sliderList[step].style.zIndex = '1';
    sliderList[step].style.opacity = '1';
    sliderList[step].style.transition = 'opacity .5s';
    
    //這裏是在分頁器函數寫完加的，小夥伴們要注意一下；
    // 自動切換的同時讓焦點自動對其
    focus();
}

// 實現自動切換
let autoMove = function autoMove() {
    // prev保存上一張的索引
    prev = step;
    // step表明即將顯示的這一張
    step++;
    // 若是step大於圖片時，讓step從新爲0
    step >= sliderList.length ? step = 0 : null;
    // 執行切換
    change();
};

//利用定時器完成自動切換
    autoTimer = setInterval(autoMove, interval);
複製代碼

此時咱們打開瀏覽器能夠看到，已經可以實現漸隱漸顯的效果了😄

細心的小夥伴會發現：咦，分頁器怎麼不跟着一塊兒動呢？

彆着急，咱們如今就來實現😄

❝

實現分頁器和圖片對應

❞ 
// 分頁器自動對焦
let focus = function focus() {
    [].forEach.call(paginationList, (item, index) => {
        step === index ? item.className = 'active' : item.className = '';
    })
};
複製代碼

函數寫出來了，那在哪裏執行呢？

咱們要讓圖片切換的時候，分頁器跟隨圖片一塊兒運動，因此圖片切換在哪，分頁器就在哪執行；

因此是在切換函數中執行的，就是如圖這裏：

如今咱們打開瀏覽器看一看，漸隱漸顯的效果已經實現了，咱們再來看下面的需求；

需求二：鼠標劃上中止自動播放/離開恢復

思路分析：

❝

鼠標劃上：

  • 左右箭頭顯示，這一步咱們在 CSS中已經實現
  • 自動播放中止:
    • 咱們以前用定時器完成的自動播放；
    • 因此鼠標劃上時，咱們清除定時器便可；

鼠標離開：

  • 恢復播放：從新開啓定時器便可
❞

代碼實現

// 鼠標通過中止自動輪播
container.onmouseenter = function () {
    clearInterval(autoTimer);
    autoTimer = null;
}

// 鼠標離開後開始自動輪播
container.onmouseleave = function () {
    autoTimer = setInterval(autoMove, interval);
}
複製代碼

需求三：點擊左右箭頭實現上下切換圖片

思路分析

❝

右箭頭：與咱們如今自動播放的方向一致，因此只須要執行一次咱們上面封裝的圖片切換函數便可；

左箭頭：與本來的切換方向相反，因此，咱們把圖片切換調轉一下便可

❞

代碼實現

// 點擊右按鈕切換下一張
changeRight.onclick = autoMove;

// 點擊左按鈕切換上一張
changeLeft.onclick = function () {
    prev = step;
    step--;
    step < 0 ? (step = sliderList.length - 1) : null;
    change();
}
複製代碼

需求四：點擊分頁器跳轉相應圖片

思路分析

❝

給每個li標籤綁定點擊事件，點擊某項時，找到與點擊的這一項索引相同的圖片的索引，讓其展現便可

❞

代碼實現

[].forEach.call(paginationList, (item, index) => {
    item.onclick = function () {
        // 若是點擊的這一項正好是當前展現的這張圖片則不作處理
        if (step === index) return;
        prev = step;
        step = index;
        change();
    }
})
複製代碼

好了，如今咱們全部需求都知足了，整合下代碼便可😄

JS完整實現代碼

let swipter = (function () {
    // 獲取須要操做的元素
    let container = document.querySelector('.container'),
        wrapper = container.querySelector('.wrapper'),
        sliderList = wrapper.querySelectorAll('.slider'),
        pagination = container.querySelector('.pagination'),
        paginationList = pagination.querySelectorAll('li'),
        changeLeft = container.querySelector('.changeLeft'),
        changeRight = container.querySelector('.changeRight');

    // 須要用到定時器，設置定時器和切換時間初始值
    let autoTimer = null,
        interval = 3000,
        prev = 0,
        step = 0;

    //切換函數封裝
    let change = function change() {
        // 讓上一張不顯示
        sliderList[prev].style.zIndex = '0';
        sliderList[prev].style.opacity = '0';

        // 讓當前張過渡顯示
        sliderList[step].style.zIndex = '1';
        sliderList[step].style.opacity = '1';
        sliderList[step].style.transition = 'opacity 2s';
        // 自動切換的同時讓焦點自動對其
        focus();
    }

    // 實現自動切換
    let autoMove = function autoMove() {
        // prev保存上一張的索引
        prev = step;
        // step表明即將顯示的這一張
        step++;
        // 若是step大於圖片時，讓step從新爲0
        step >= sliderList.length ? step = 0 : null;
        // 執行切換
        change();
    };

    //利用定時器完成自動切換
    autoTimer = setInterval(autoMove, interval);

    // 分頁器自動對焦
    let focus = function focus() {
        [].forEach.call(paginationList, (item, index) => {
            step === index ? item.className = 'active' : item.className = '';
        })
    };

    // 鼠標通過中止自動輪播
    container.onmouseenter = function () {
        clearInterval(autoTimer);
        autoTimer = null;
    }

    // 鼠標離開後開始自動輪播
    container.onmouseleave = function () {
        autoTimer = setInterval(autoMove, interval);
    }

    // 鼠標點擊分頁器跳轉相應圖片
    let clickFocus = function autoFocus() {
        [].forEach.call(paginationList, (item, index) => {
            item.onclick = function () {
                if (step === index) return;
                prev = step;
                step = index;
                change();
            }
        })
    }

    // 點擊右按鈕切換下一張
    changeRight.onclick = autoMove;

    // 點擊左按鈕切換上一張
    changeLeft.onclick = function () {
        prev = step;
        step--;
        step < 0 ? (step = sliderList.length - 1) : null;
        change();
    }

    return {
        init() {
            
            clickFocus();

        }
    }
})();
swipter.init();
複製代碼

雖然實現了功能，可是當咱們頻繁點擊的時候還會有一些問題，因此須要作下節流或者防抖，因爲後面小芝麻打算先重點梳理防抖和節流的知識點，因此這裏就沒有在繼續完善，各位小夥伴們若是有須要可本身加上😄

敬請期待小芝麻的知識總結哦，感謝你們的支持！

本文使用 mdnice 排版

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程