仿小米輪播-有解無憂

仿小米輪播

HTML部分

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
    <title>仿小米官網輪播</title>
</head>

<body>
    <div class="wrapper">
        <ul class="list">
            <li class="item active">
                <img src="img1.jpg" alt="">
            </li>
            <li class="item">
                <img src="img2.jpg" alt="">
            </li>
            <li class="item">
                <img src="img3.jpg" alt="">
            </li>
            <li class="item">
                <img src="img4.jpg" alt="">
            </li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index='0'></li>
            <li class="point" data-index='1'></li>
            <li class="point" data-index='2'></li>
            <li class="point" data-index='3'></li>
        </ul>
        <button class="btn Pre" id="goPre">&#xe7b8;</button>
        <button class="btn Next" id="goNext">&#xe7b7;</button>
    </div>
</html>

CSS部分

@font-face {
    font-family: 'iconfont';
    src: url('fonts/iconfont.eot');
    src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/iconfont.woff2') format('woff2'),
        url('fonts/iconfont.woff') format('woff'),
        url('fonts/iconfont.ttf') format('truetype'),
        url('fonts/iconfont.svg#iconfont') format('svg');
}


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

body{
    background: #ccc;
}

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

.list{
    position: relative;
    width:800px;
    height: 400px;
    list-style: none;
    color: #fff;
    font-size: 50px;
}

.item{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .7s;
}

.item img{
    width: 100%;
    height: 100%;
}


.item.active{
    opacity: 1;
    z-index: 3;
}

.btn{
    position: absolute;
    top: 50%;
    margin-top: -40px;
    width: 50px;
    height: 80px;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: all .2s;
    z-index: 4;
    cursor: pointer;
}

#goPre{
    font-family: 'iconfont';
    left: 0;
}

#goNext{
    font-family: 'iconfont';
    right: 0;
}

#goPre:hover{
    background-color: rgb(48, 48,48);
}

#goNext:hover{
    background-color: rgb(48, 48, 48);
}

.pointList{
    position: absolute;
    bottom:20px;
    right:100px;
    list-style: none;
    z-index: 999;
}

.point{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid rgb(54, 54, 54);
    float: left;
    margin-right:14px ;
    background-color: transparent;
    cursor: pointer;
}

.point.active{
    background-color: rgb(87, 87, 87);
}

JavaScript部分

window.addEventListener('load', function () {
    var items = document.querySelectorAll('.item')
    var points = document.querySelectorAll('.point')
    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');
    var wrap = document.querySelector('.wrapper');
    // 圖片位置
    var index = 0;
    // 圖片的總張數
    var len = items.length

    // 封裝函式 清除當前的位置
    function clearActive() {
        for (var i = 0; i < items.length; i++) {
            items[i].className = 'item';
        }
        for (var i = 0; i < points.length; i++) {
            points[i].className = 'point';
        }
    }

    //封裝函式 當前的位置
    function goIndex() {
        clearActive();
        items[index].className = 'item active';
        points[index].className = 'point active';
    }

    // 下一張
    function goNext() {
        if (index < len - 1) {
            index++
        } else {
            index = 0;
        }
        goIndex()
    }

    // 上一張
    function goPre() {
        if (index === 0) {
            index = len - 1
        } else {
            index--
        }
        goIndex()
    }

    // 跨越式圓點
    for (var i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function () {
            var pointIndex = this.getAttribute('data-index');
            index = pointIndex
            goIndex()
        })
    }

    //節流
    //限制用戶過分點擊 帶來不好體驗
    var lock = true;
    // 下一張
    goNextBtn.addEventListener('click', function () {
        if (!lock) return
        goNext();
        lock = false;
        setTimeout(() => {
            lock = true
        }, 1000);
    })

    // 上一張
    goPreBtn.addEventListener('click', function () {
        if (!lock) return
        goPre();
        lock = false;
        setTimeout(() => {
            lock = true
        }, 1000);
    })

    var timer;
    // 自動輪播
    function TimerFocue() {
        timer = setInterval(() => {
            goNext()
        }, 1000);
    }
    TimerFocue()

    // 清除定時器
    wrap.addEventListener('mouseover', function () {
        clearInterval(timer);
    })

    // 恢復定時器
    wrap.addEventListener('mouseout', function () {
        TimerFocue()
    })
})

注：公眾號搜索【前端小鄧】→ 回復【仿小米輪播】即可獲取【圖片素材】+【原始碼】+【演示效果】

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290293.html

標籤：其他

上一篇：jQuery中的事件處理與影片效果

下一篇：JavaScript 資料結構與演算法（堆疊）

仿小米輪播

仿小米輪播

HTML部分

CSS部分

JavaScript部分

注： 公眾號搜索【前端小鄧】→ 回復【仿小米輪播】即可獲取【圖片素材】+【原始碼】+【演示效果】

注：公眾號搜索【前端小鄧】→ 回復【仿小米輪播】即可獲取【圖片素材】+【原始碼】+【演示效果】