轮播图

2022-08-18 00:33:25 作者：互联网

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <p>测试轮播图</p>

    <hr id="hr1"/>

    <!-- 建立一个div控件作为图片框 -->

    <div class="imgBox">

        <!-- alt：图片路径失败时替换显示内容 -->

        <img class="img-slide img" src="./img/1.jpg" alt="img1">

        <img class="img-slide img" src="./img/2.jpg" alt="img2">

        <img class="img-slide img" src="./img/3.jpg" alt="img3">

        <img class="img-slide img" src="./img/4.jpg" alt="img4">

        <img class="img-slide img" src="./img/5.jpg" alt="img5">

        <img class="img-slide img" src="./img/6.jpg" alt="img6">
    </div>
</body>
<script src="./script.js"></script>
</html>

上述代码中可以中图片任意选择喜欢的图片保存在文件夹中，然后调用

CSS部分

/* 标签选择器 */

p {

    text-align: center;

    font-size: 25px;

    color: cadetblue;

    font-family: fantasy;

}

/* id选择器 */

#hr1 {

    background-color: cadetblue;

    height: 2px;

    width: 75%;

}

/* 类选择器 */

.imgBox {

    border-top: 5px solid cadetblue;

    /* 避免因窗口变化影响图片效果 */

    width: 60%;

    height: 40%;

    margin: 0 auto;

}

.img {

    width: 100%;

    height: 40%;

    margin: 0 auto;

    display: none;

}

JS部分

       // index：索引， len：长度

        var index = 0, len;

        // 类似获取一个元素数组

        var imgBox = document.getElementsByClassName("img-slide");

        len = imgBox.length;

        imgBox[index].style.display = 'block';

        // 逻辑控制函数

        function slideShow() {

            index ++;

            // 防止数组溢出

            if(index >= len) {
                index = 0;
            }

            // 遍历每一个元素

            for(var i=0; i<len; i++) {

                imgBox[i].style.display = 'none';

            }

            // 每次只有一张图片显示

            imgBox[index].style.display = 'block';

        }

        // 定时器，间隔3s切换图片

        setInterval(slideShow, 3000);

标签：index,轮播,imgBox,len,height,width,选择器
来源： https://www.cnblogs.com/zyKDM/p/16597316.html