js-动态生成小圆点（根据轮播图图片张数动态生成小圆点）

最新推荐文章于 2023-02-18 14:57:17 发布

秋天1014童话

最新推荐文章于 2023-02-18 14:57:17 发布

阅读量1w

点赞数 1

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53312299

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

动态生成小圆点（根据轮播图图片张数动态生成小圆点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,ul{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .lunbo{
            width: 730px;
            height: 454px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .circle{
            position: absolute;
            left: 50%;
            margin-left: -50px;
            bottom: 10px;           
        }
        .circle span{
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: #ccc;
            text-align: center;
            border-radius: 18px;
            cursor: pointer;
            margin-right:10px;
        }
        .circle span.current{
            background-color: yellow;
        }
    </style>
    <script>    

        window.onload = function(){
            function $(id){ return document.getElementById(id); }
            //动态生成轮播图小圆点
            var circle = document.createElement("div"); 
            circle.setAttribute("class","circle");
            var lis = document.getElementsByTagName("li");
            for(var i=0; i<lis.length; i++){
                var span = document.createElement("span");
                span.innerHTML = i+1;
                circle.appendChild(span);
            }
            $("scroll").appendChild(circle);

            var spanChildren = circle.children;
            spanChildren[0].setAttribute("class","current");
        }
    </script>
</head>
<body>
    <div class="lunbo" id="scroll">
        <ul id="ul">
            <li><img src="images/11.jpg" alt=""></li>
            <li><img src="images/22.jpg" alt=""></li>
            <li><img src="images/33.jpg" alt=""></li>
            <li><img src="images/44.jpg" alt=""></li>
            <li><img src="images/55.jpg" alt=""></li> 
            <li><img src="images/66.jpg" alt=""></li>
        </ul>
        <!-- <div class="circle">
            <span>1</span>
            <span class="current">2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div> -->
    </div>

</body>
</html>

秋天1014童话

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
js-动态生成小圆点（根据轮播图图片张数动态生成小圆点）

动态生成小圆点（根据轮播图图片张数动态生成小圆点）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body,ul{ padding: 0; margin: 0;
复制链接

扫一扫