lovecoding
/
Web1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!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>&lt;</li>
                    <li>&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> 
        // 获取所有轮播的图片
        aImg = document.getElementsByClassName("s-img");
        // 获取所有数字按钮
        aNumBtn = document.getElementsByClassName("num-btn");

        // 给数字按钮绑定事件
        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");
            }
        }
    </script>
</body>
</html>