轮播图动态生成小圆点

轮播图动态生成小圆点

    • 效果图展示
    • 直接上代码

效果图展示

序号是倒序(个人练习使用) 不需要删除即可

轮播图动态生成小圆点_第1张图片

直接上代码

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .box{
            width: 760px;
            height: 454px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .circle{
            position: absolute;
            left: 50%;
            margin-left:-90px;
            bottom: 10px;
        }
        .circle span{
            float: left;
            width: 18px;
            height: 18px;
            background-color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            margin-right:10px;
            cursor: pointer;
        }
        .circle span.current{
            background-color: orange;
        }
    </style>
    <script>
        window.onload=function(){
            var scroll=document.getElementById("scroll");
            var ul=document.getElementById("ul");
            var circle=document.createElement("div");
            circle.setAttribute("class","circle");
            scroll.appendChild(circle);
            var lis=ul.children;
            var god=circle.children;
            for(var i=0;i<lis.length;i++){
                var span=document.createElement("span");
//                circle.appendChild(span);
                if(god.length==0){
                    circle.appendChild(span)
                }else{
                    circle.insertBefore(span,god[0]);
                }
                span.innerHTML=i+1;
            }
            god[0].className="current";
        }
    </script>
</head>
<body>
    <div class="box" id="scroll">
        <!--<div class="circle">-->
            <!--<span class="current">1</span>-->
            <!--<span>2</span>-->
            <!--<span>3</span>-->
            <!--<span>4</span>-->
            <!--<span>5</span>-->
            <!--<span>6</span>-->
        <!--</div>-->
        <div class="slider">
            <ul class="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>
    </div>
</body>
</html>

你可能感兴趣的:(web学习)