lovecoding
/
web0715


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset */
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body {
            height: 100vh;
            background-color: black;
            overflow: hidden;
        }

        .container {
            width: 490px;
            height: 170px;
            border: 5px solid #fff;
            margin: 100px auto;
            position: relative;
        }

        .container .slider-img {
            position: relative;
        }

        .container .slider-img img {
            width: 490px;
            height: 170px;
        }

        .container .slider-img li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .container .slider-img .active {
            display: block;
        }

        .slider-btn {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
        }

        .slider-btn ul li {
            color: #fff;
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #f90;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }

        .slider-btn .active {
            background-color: red;
        }

        .slider-btn .slider-btn-left {
            float: left;
            padding-left: 20px;
        }

        .slider-btn .slider-btn-right {
            float: right;
            padding-right: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="slider-img">
            <ul>
                <li class="img-item active">
                    <img src="./image/image.png" alt="img">
                </li>
                <li class="img-item">
                    <img src="./image/image1.png" alt="img">
                </li>
                <li class="img-item">
                    <img src="./image/image2.png" alt="img">
                </li>
                <li class="img-item">
                    <img src="./image/image3.png" alt="img">
                </li>
                <li class="img-item">
                    <img src="./image/image4.png" alt="img">
                </li>
            </ul>
        </div>
        <div class="slider-btn">
            <div class="slider-btn-left">
                <ul>
                    <li class="left-btn">&lt;</li>
                    <li class="right-btn">&gt;</li>
                </ul>
            </div>
            <div class="slider-btn-right">
                <ul>
                    <li class="num-btn active">1</li>
                    <li class="num-btn">2</li>
                    <li class="num-btn">3</li>
                    <li class="num-btn">4</li>
                    <li class="num-btn">5</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        // 获取5个数字按钮
        var numBtn = document.getElementsByClassName("num-btn");
        // 获取5张图片
        var imgItem = document.getElementsByClassName("img-item");
        // 获取向右按钮
        var rightBtn = document.getElementsByClassName("right-btn")[0];
        // 获取向左按钮
        var leftBtn = document.getElementsByClassName("left-btn")[0];
        // 获取轮播区域标签
        var oContainer = document.getElementsByClassName("container")[0];
        // 标识当前显示的是第几个
        var nowIndex = 0;
        // 定义存储定时函数的变量
        var timer = null;
        
        
        // 数字按钮功能
        // 给5个数字按钮绑定事件
        for(var i=0;i<numBtn.length;i++){
            // 循环过程当中给每一个按钮添加一个新属性index 用来保存索引i
            numBtn[i].index = i;
            // 循环给每一个按钮绑定按钮事件
            numBtn[i].onmouseenter = function(){
                // 调用runFun函数 实现控制
                runFun(this.index);
            }
        }

        //向后按钮事件
        rightBtn.onclick=function(){
            runFun(nowIndex+1);
        }
        // 向上按钮事件
        leftBtn.onclick = function(){
            runFun(nowIndex-1)
        }

        //定时轮播
        function playFun(){
            timer = setInterval(function(){
                runFun(nowIndex+1);
            },1000)
        }
        //自动调用函数开始轮播
        playFun();
        

        // 鼠标移入轮播图区域停止播放
        oContainer.onmouseenter = function(){
            clearInterval(timer);
        };

        // 鼠标移出轮播图区域继续播放
        oContainer.onmouseleave = function(){
            // 重新调用播放轮播函数
            playFun();
        }

        // 封装函数实现控制第n个按钮和图片的现实
        function runFun(n) {
            // 控制向右到达边界的时候更正
            if(n==5){
                n = 0
            }
            // 控制向左到达边界的时候更正
            if(n<0){
                n = 4
            }
            //循环所有按钮 将选中状态的active类逐个移除
            for (var j = 0; j < numBtn.length; j++) {
                // 移除按钮的active类
                numBtn[j].classList.remove("active");
                // 移除图片的选中状态 active类
                imgItem[j].classList.remove("active");
            }
            // 控制第N个按钮 和图片的现实
            numBtn[n].classList.add("active");
            imgItem[n].classList.add("active");
            // 将当前的索引 赋值给nowIdex;
            nowIndex = n;
        }


        //未封装函数前的数字按钮功能
        // // 给5个数字按钮绑定事件
        // for(var i=0;i<numBtn.length;i++){
        //     // 循环过程当中给每一个按钮添加一个新属性index 用来保存索引i
        //     numBtn[i].index = i;
        //     // 循环给每一个按钮绑定按钮事件
        //     numBtn[i].onmouseenter = function(){
        //         // 循环所有按钮 将选中状态的active类逐个移除
        //         for(var j=0;j<numBtn.length;j++){
        //             // 移除按钮的active类
        //             numBtn[j].classList.remove("active");
        //             // 移除图片的选中状态 active类
        //             imgItem[j].classList.remove("active");
        //         }
        //         // 向当前移入的数字按钮中添加一个新类 activ 变为选中状态
        //         this.classList.add("active");
        //         // 向制定索引的图片添加选中状态acitve类
        //         imgItem[this.index].classList.add("active");
        //     }
        // }
    </script>
</body>

</html>