master

分支 (1)

管理

管理

master

huawei01
/
09js.html

<!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>
        .banner{
            width: 560px;
            height: 305px;
            margin: 100px auto 0;
            background-color: aqua;
            position: relative;
        }
        .img img {
            display: none;
        }
        .img img:nth-child(1){
            display: block;
        }
        /* span 它是一个文本容器，不支持直接设置宽高，需要改变它的属性成内联块或块级元素，才能设置宽高 */
        .arrow{
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -20px;
            display: flex;
            width: 100%;
            justify-content: space-between;
        }
        .arrow span{
            display: inline-block;
            width: 40px;
            height: 40px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            border: 1px solid red;
            cursor: pointer;
        }
        /* .arrow span:nth-child(1){
            float: left;
        }
        .arrow span:nth-child(2){
            float: right;
        } */
        .point{
            clear: both;
            position: absolute;
            bottom: 5px;
            right: 10px;
            display: flex;
        }
        .point li{
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #fff;
            /* display: inline-block; */
            margin: 0 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="banner">
        <div class="img">
            <img width="560px" height="305px" src="http://contentcms-bj.cdn.bcebos.com/cmspic/a9a9a195f63917b2e98ac85cebac6241.jpeg?x-bce-process=image/crop,x_0,y_0,w_631,h_343" alt="1">
            <img width="560px" height="305px" src="http://contentcms-bj.cdn.bcebos.com/cmspic/7ff49b526a0dc4c25e1c27e17ef33043.jpeg?x-bce-process=image/crop,x_0,y_0,w_1216,h_665" alt="2">
            <img width="560px" height="305px" src="http://contentcms-bj.cdn.bcebos.com/cmspic/8e1704d018467a105b6edf84047561f4.jpeg?x-bce-process=image/crop,x_0,y_0,w_1917,h_1056" alt="3">
            <img width="560px" height="305px" src="http://contentcms-bj.cdn.bcebos.com/cmspic/0736f0f3d4750e6c73941fd1f7f13df3.jpeg?x-bce-process=image/crop,x_0,y_0,w_617,h_374" alt="4">
        </div>
        <div class="arrow">
            <!-- 实体字符 < > 空格 &nbsp; -->
            <span>&lt;</span>
            <span>&gt;</span>
        </div>
        <ul class="point">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


    <script>
        //js的实现百度轮播图效果
        //1.获取左右箭头的元素
        var l_span = document.getElementsByTagName('span')[0];
        var r_span = document.getElementsByTagName('span')[1];
        // console.log(l_span,r_span);
        //3.获取所有图片的集合
        var img = document.getElementsByTagName("img");
        // console.log(img);
        // 初始化变量 num
        var num = 0;
        //4.获取所有小圆点的集合
        var oLi = document.getElementsByTagName("li");
        // console.log(oLi);
        //2.绑定右箭头事件
        r_span.onclick = function(){
            // alert("adaadadadad")
            for (let index = 0; index < img.length; index++) {
                img[index].style.display = "none";
                oLi[index].style.background = "#fff";
            }
            num++;
            if (num>3) {
                num = 0;
            }
            img[num].style.display = "block";
            oLi[num].style.background = "red";
            // console.log(num);
        }
        //3.绑定左箭头事件
        l_span.onclick = function(){

            for (let index = 0; index < img.length; index++) {
                img[index].style.display = "none";
                oLi[index].style.background = "#fff";
            }
            num--;
            if (num < 0) {
                num = 3;
            }
            img[num].style.display = "block";
            oLi[num].style.background = "red";
        }
        // 5.给每一个小圆点绑定点击或者移入事件
        oLi[0].style.background = "red";
        for (let i = 0; i < oLi.length; i++) {
            // console.log(oLi[i]);
            oLi[i].onmouseover = function(){
                for (let index = 0; index < img.length; index++) {
                    img[index].style.display = "none";
                    oLi[index].style.background = "#fff";
                }
                img[i].style.display = "block";
                oLi[i].style.background = "red";
                // console.log("小圆点",num);
                // 和上面的左右箭头关联
                num = i;
                // console.log("小圆点",num);
            }
        }
    </script>
</body>
</html>