lovecoding
/
Web1020


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!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 {
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        html {
            background-color: black;
        }

        /* 工具类 */
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .container {
            width: 600px;
            height: 200px;
            border: 4px solid #fff;
            margin: 100px auto;
            position: relative;
        }

        .container .swiper-img img {
            width: 600px;
            height: 200px;
            display: none;
        }

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

        /* 按钮区域 */
        .container .swiper-btn {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: calc(100% - 40px);
            padding: 0 20px;
        }

        .container .swiper-btn li {
            color: #fff;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #f90;
            text-align: center;
            line-height: 20px;
            margin: 0 3px;
        }

        .container .swiper-btn .left-btn {
            float: left;
        }

        .container .swiper-btn .right-btn {
            float: right;
        }

        .container .right-btn .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="swiper-img">
            <img class="s-img active" src="./image/image.png" alt="图片">
            <img class="s-img" src="./image/image1.png" alt="图片">
            <img class="s-img" src="./image/image2.png" alt="图片">
            <img class="s-img" src="./image/image3.png" alt="图片">
            <img class="s-img" src="./image/image4.png" alt="图片">
        </div>
        <div class="swiper-btn clearfix">
            <div class="left-btn">
                <ul>
                    <li class="arr-btn">&lt;</li>
                    <li class="arr-btn">&gt;</li>
                </ul>
            </div>
            <div class="right-btn">
                <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>
        // 获取所有轮播的图片
        var aImg = document.getElementsByClassName("s-img");
        // 获取所有数字按钮
        var aNumBtn = document.getElementsByClassName("num-btn");
        // 获取左右按钮
        var leftBtn = document.getElementsByClassName("arr-btn")[0];
        var rightBtn = document.getElementsByClassName("arr-btn")[1];
        // 获取整个轮播图区域
        var oSwiper = document.getElementsByClassName("container")[0];
        // 定义全局变量放置当前索引值
        var nowIndex = 0;
        // 定义定时函数全局变量
        var timer = null;


        // 定义切换轮播图函数
        function changeSwiper(index) {
            // 清除状态
            for (var i = 0; i < aNumBtn.length; i++) {
                // 清除所有数字按钮的选中状态
                aNumBtn[i].classList.remove("active");
                // 清除所有轮播图片的选中状态
                aImg[i].classList.remove("active");
            }
            // 给当前选中的数字按钮加上选中状态
            aNumBtn[index].classList.add("active");
            // 给当前选中的轮播图片加上选中状态
            aImg[index].classList.add("active");
            // 更新当前索引值
            nowIndex = index;
        }

        // 给数字按钮绑定事件
        for (var i = 0; i < aNumBtn.length; i++) {
            // 给每个数字按钮绑定一个索引值
            aNumBtn[i].index = i;
            aNumBtn[i].onmouseover = function () {
                changeSwiper(this.index);
            }
        }

        // 绑定向右按钮事件
        rightBtn.onclick = function () {
            // 判断数字是否是最后一个 如果是的从第一个开始
            if (nowIndex == 4) {
                changeSwiper(0);
            } else {
                changeSwiper(nowIndex + 1);
            }
        }
        // 绑定向左按钮事件
        leftBtn.onclick = function () {
            // 判断数字是否是第一个 如果是的从最后一个开始
            if (nowIndex == 0) {
                changeSwiper(4);
            } else {
                changeSwiper(nowIndex - 1);
            }
        }

        // 实现每隔1秒钟自动切换一次
        function autoChange() {
            timer = setInterval(function () {
                if (nowIndex == 4) {
                    changeSwiper(0);
                } else {
                    changeSwiper(nowIndex + 1);
                }
            }, 1000);
        }
        autoChange();

        // 实现鼠标移入轮播图区域停止自动切换
        oSwiper.onmouseenter = function () {
            clearInterval(timer);
        }
        // 实现鼠标移出轮播图区域开始自动切换
        oSwiper.onmouseleave = function () {
            autoChange();
        }

        // 给数字按钮绑定事件
        // for(var i=0;i<aNumBtn.length;i++){
        //     // 给每个数字按钮绑定一个索引值
        //     aNumBtn[i].index = i;
        //     aNumBtn[i].onmouseover = function(){
        //         // 清除状态
        //         for(var j =0;j<aNumBtn.length;j++){
        //             // 清除所有数字按钮的选中状态
        //             aNumBtn[j].classList.remove("active");
        //             // 清除所有轮播图片的选中状态
        //             aImg[j].classList.remove("active");
        //         }
        //         // 给当前选中的数字按钮加上选中状态
        //         this.classList.add("active");
        //         // 给当前选中的轮播图片加上选中状态
        //         aImg[this.index].classList.add("active");
        //         // 更新当前索引值
        //         nowIndex = this.index;
        //     }
        // }


    </script>
</body>

</html>