前端學習第68天輪播圖

時間 2019-11-20

標籤前端學習 68天简体版

原文原文鏈接

一.輪播圖html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <style >
        * {
            /*不容許選擇文本, 網頁文本不能負責*/
            user-select: none;
        }
        body, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .scroll {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            background-color: orange;
            position: relative;
            cursor: pointer;
        }
        .scroll_view {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .scroll_view li {
            background: red;
            width: 100%;
            height: 100%;
            font: normal 100px/460px 'STSong';
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        .scroll_view li.active {
            opacity: 1;
            transition: .5s;
        }
        .left {
            position: absolute;
            top: 170px;
            left: 0;
            background-color: #eee;
            font-size: 100px;
        }
        .left:hover, .right:hover {
            cursor: pointer;
            background-color: #333;
        }
        .right {
            position: absolute;
            top: 170px;
            right: 0;
            background-color: #eee;
            font-size: 100px;
        }

        .scroll_tag {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .scroll_tag li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            border: 3px solid #ddd;
            float: left;
            margin: 0 10px;
        }
        .scroll_tag li.active {
            background-color: #ccc;
            border: 3px solid #333;
        }
    </style>
</head>
<body>
<div class="scroll">
    <ul class="scroll_view">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul class="scroll_toggle">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>
    <ul class="scroll_tag">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
<script>
(function () {
    let left_btn = document.querySelector('.left');
    let right_btn = document.querySelector('.right');
    let img_lis = document.querySelectorAll('.scroll_view li');
    let tag_lis = document.querySelectorAll('.scroll_tag li');
    let scroll = document.querySelector('.scroll');

    // 定時器
    let timer = 0;

    // 記錄活躍狀態的索引變量
    let active_index = 0;

    // 下一張
    right_btn.onclick = function () {
        // 清除以前活躍的圖片和tag
        img_lis[active_index].className = "";
        tag_lis[active_index].className = "";

        // 索引切換(更新活躍索引)
        // 安全性: 最後一張的下一張應該是第一張
        if (active_index == 4) active_index = -1;
        active_index++;

        // 設置將要活躍的圖片和tag
        img_lis[active_index].className = "active";
        tag_lis[active_index].className = "active";
    };
    // 上一張
    left_btn.onclick = function () {
        // 清除以前活躍的圖片和tag
        img_lis[active_index].className = "";
        tag_lis[active_index].className = "";

        // 索引切換(更新活躍索引)
        // 安全性: 第一張的前一張應該是最後一張
        if (active_index == 0) active_index = 5;
        active_index--;

        // 設置將要活躍的圖片和tag
        img_lis[active_index].className = "active";
        tag_lis[active_index].className = "active";
    };

    // 自動輪播
    function autoScroll() {
        timer = setInterval(function () {
            // 清除以前活躍的圖片和tag
            img_lis[active_index].className = "";
            tag_lis[active_index].className = "";

            // 索引切換(更新活躍索引)
            // 安全性: 最後一張的下一張應該是第一張
            if (active_index == 4) active_index = -1;
            active_index++;

            // 設置將要活躍的圖片和tag
            img_lis[active_index].className = "active";
            tag_lis[active_index].className = "active";
        }, 1500);
    }
    // 加載頁面就只執行一次,打開自動輪播
    autoScroll();

    // 鼠標懸浮輪播圖中止自動輪播
    scroll.onmouseenter = function () {
        clearInterval(timer)
    };
    // 鼠標移開從新開啓自動輪播
    scroll.onmouseleave = function () {
        autoScroll();
    };

    // tag點擊對應的圖片切換
    for (let i = 0; i < tag_lis.length; i++) {
        tag_lis[i].onclick = function () {
            // console.log(i);
            // 清除以前活躍的圖片和tag
            img_lis[active_index].className = "";
            tag_lis[active_index].className = "";

            // 更新活躍索引
            active_index = i;

            // 設置將要活躍的圖片和tag
            img_lis[active_index].className = "active";
            tag_lis[active_index].className = "active";
        }
    }

})()
</script>
</html>

二.滾動輪播圖安全

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滾動輪播</title>
    <style>
        body, ul {
            margin: 0;
            padding: 0;
            list-style: none;
            user-select: none;
        }

        .wrapper {
            width: 400px;
            height: 240px;
            background-color: orange;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        /* 滾得的標籤是ul, 帶動着4個li同步運動 */
        .scroll_view {
            width: 1600px;
            /*利用絕對定位完成運動*/
            position: absolute;
            top: 0;
            /*left: -400px;*/
            left: 0;
            /*transition: 1s;*/
        }
        .scroll_view li {
            width: 400px;
            height: 240px;
            font: normal 80px/240px 'STSong';
            text-align: center;
            float: left;
        }
        .li1 { background-color: pink }
        .li2 { background-color: deeppink }
        .li3 { background-color: lightpink }
        .li4 { background-color: hotpink}

        .left {
            position: absolute;
            top: 100px;
            left: 0;
            background-color: #eee;
            font-size: 30px;
        }
        .left:hover, .right:hover {
            cursor: pointer;
            background-color: #333;
        }
        .right {
            position: absolute;
            top: 100px;
            right: 0;
            background-color: #eee;
            font-size: 30px;
        }

        .scroll_tag {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .scroll_tag li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            border: 3px solid #ddd;
            float: left;
            margin: 0 10px;
        }
        .scroll_tag li.active {
            background-color: #ccc;
            border: 3px solid #333;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="scroll_view">
            <li class="li1">1</li>
            <li class="li2">2</li>
            <li class="li3">3</li>
            <li class="li4">4</li>
        </ul>
        <ul class="scroll_toggle">
            <li class="left">&lt;</li>
            <li class="right">&gt;</li>
        </ul>
        <ul class="scroll_tag">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
(function () {
    let scroll_view = document.querySelector('.scroll_view');
    let left_btn = document.querySelector('.left');
    let right_btn = document.querySelector('.right');
    let tag_lis = document.querySelectorAll('.scroll_tag li');
    
    right_btn.onclick = function () {
        let total_lenth = 400;
        let count = 0;
        let step = 8;
        let timer = setInterval(function () {
            // 經過滾動的距離映射出所在的圖片索引
            let index = parseInt(-scroll_view.offsetLeft / total_lenth);
            index += 1;
            console.log(index);
            // 臨界點, 往右4
            if (index == 4) {
                clearInterval(timer);
                return;
            }

            // 0+1 ==> 1
            // 1+1 ==> 2
            // 2+1 ==> 3
            tag_lis[index - 1].className = "";
            tag_lis[index].className = "active";

            scroll_view.style.left = scroll_view.offsetLeft - step + 'px';
            count++;
            if (count >= total_lenth / step) {
                clearInterval(timer)
            }
        }, 10);
    };

    left_btn.onclick = function () {
        let total_lenth = 400;
        let count = 0;
        let step = 8;
        let timer = setInterval(function () {
            // 要偏移座標系, 要加上一個寬度400 total_lenth
            // 要處理第一次偏移bug, 少加上8 step
            let index = parseInt((-scroll_view.offsetLeft + 392) / total_lenth);
            console.log(index);
            // 處理第一次偏移bug

            // 3 => 2
            // 2 => 1
            // 1 => 0
            // 臨界點, 往左0
            if (index == 0) {
                clearInterval(timer);
                return;
            }
            // if (index == 4) index = 3;
            tag_lis[index].className = "";
            tag_lis[index - 1].className = "active";

            scroll_view.style.left = scroll_view.offsetLeft + step + 'px';
            count++;
            if (count >= total_lenth / step) {
                clearInterval(timer)
            }
        }, 10);
    }
})()
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。