html京东小圆点幻灯片代码

HTML京东小圆点幻灯片代码介绍：

!DOCTYPE html>
    html>
    head>
        title>
    京东小圆点幻灯片/title>
        meta charset="UTF-8">
        style>
        /* 设置容器样式 */        .container {
                width: 800px;
                height: 480px;
                border: 1px solid #ccc;
                position: relative;
                overflow: hidden;
        }
        /* 设置图片样式 */        .container img {
                width: 800px;
                height: 480px;
                position: absolute;
                top: 0;
                left: 0;
        }
        /* 设置小圆点样式 */        .dotBox {
                position: absolute;
                bottom: 20px;
                width: 100%;
                text-align: center;
        }
        .dotBox span {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #ccc;
                margin-right: 10px;
        }
        /* 设置当前小圆点样式 */        .dotBox span.active {
                background-color: #f40;
        }
        /style>
    /head>
    body>
        div class="container">
            img src="1.jpg" alt="图片1">
            img src="2.jpg" alt="图片2">
            img src="3.jpg" alt="图片3">
            img src="4.jpg" alt="图片4">
            div class="dotBox">
                span class="active">
    /span>
                span>
    /span>
                span>
    /span>
                span>
    /span>
            /div>
        /div>
        script type="text/javascript">
            /* 小圆点跟随图片改变 */        var imgs = document.getElementsByTagName("img");
            var dots = document.getElementsByTagName("span");
        function changeImg(index) {
                for (var i = 0, len = dots.length;
     i  len;
 i++) {
                    dots[i].setAttribute("class", "");
            }
                dots[index].setAttribute("class", "active");
        }
            /* 设置图片自动轮播 */        var index = 0;
        setInterval(function () {
                index++;
            if (index === 4) {
                    index = 0;
            }
                changeImg(index);
                for (var i = 0;
     i  len;
 i++) {
                    imgs[i].style.display = "none";
            }
                imgs[index].style.display = "block";
        }
    , 2000);
        /script>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！