使用html和js实现的一个简单小练习轮播图。大概功能主要是：

1、使用时间函数自动切换图片；

2、在图片及按钮及小圆点的父节点身上绑定事件代理，添加mouseenter及mouseleave事件类型，让鼠标移入，图片暂停，移出，图片恢复轮播；

3、在按钮的父节点身上绑定事件代理，事件类型为click，使用event.target判断点击的目标范围，让左右两个按钮，点击可以切换上一张或下一张；
4、给图片添加样式，让下面的四个小圆点会随图片变颜色；
5、在小圆点的父节点身上绑定事件代理，事件类型为click，同样使用event.target判断点击的目标范围，让小圆点可以点击并切换到对应的图片上。

依旧使用的是DOM2事件代理，详细的解释和代码步骤我都注释在下面的代码中的，请君一阅。

【注：仅作自己查看和分享学习之用】

效果图如下：

 代码如下：

<!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="https://at.alicdn.com/t/c/font_3881267_wfv3iyzbijg.css">
</head>
<style>
    section {
        position: relative;
        height: 500px;
        width: 780px;
        border: 1px solid;
        margin: 100px auto;
    }

    #img {
        height: 100%;
        width: 100%;
        background-size: 100% 100%;
    }

    p {
        position: absolute;
        left: 50%;
        bottom: 0px;
        transform: translate(-50%, -50%);
    }

    i {
        height: 15px;
        width: 15px;
        background-color: gray;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
    }

    i:nth-child(1) {
        background-color: white;
    }

    i:nth-child(4) {
        margin-right: 0;
    }

    .left,
    .right {
        color: rgba(255, 255, 255, 0.7);
        font-size: 50px;
        font-weight: bolder;
        position: absolute;
        top: 50%;
        font-weight: 500;
    }

    .left {
        left: 0px;
        transform: translate(15%, -50%);
    }

    .right {
        right: 0px;
        transform: translate(-15%, -50%);
    }
</style>

<body>
    <section>
        <span class="left iconfont icon-anniu_jiantouxiangzuo"></span>
        <img src="./img/冬至竹林1.jpg" alt="" id="img">
        <span class="right iconfont icon-anniu-jiantouxiangyou"></span>
        <p></p>
    </section>
    <script src="./index.js"></script>
</body>

</html>
/**  需求：
         *  1、自动切换图片
            2、鼠标移入，图片暂停，移出，图片恢复轮播
            3、左右两个按钮，点击可以切换上一张或下一张
            4、下面的四个小圆点会随图片变颜色
            5、小圆点可以点击并切换到对应的图片上
        */

        //获取把圆点节点放置的盒子节点，即p节点
        let pEle = document.getElementsByTagName("p")[0];
        //获取事件代理的父元素section
        let secEle = document.getElementsByTagName("section")[0];

        let imgArr = [
            "./img/冬至竹林1.jpg",
            "./img/冬至竹林2.jpg",
            "./img/冬至竹林3.jpg",
            "./img/冬至竹林4.jpg",
        ]
        //获取时间函数的起始下标
        let i = 0;
        //图片有多少张，就传几个参进去，并且接收这个返回的数组
        let cirArr = creatCircle(imgArr.length);
        //遍历cirArr数组，将圆点添加进它的父节点p节点中
        cirArr.forEach(node => pEle.appendChild(node));

        //获取所有的圆点节点
        let iEle = document.getElementsByTagName("i");
        //给每一个圆点添加上自定义属性，并赋上下标
        for (let k = 0; k < iEle.length; k++) {
            iEle[k].dataset.index = k;
        }

        let timer;
        //轮播：时间函数，1秒自动换一张
        function playTime() {
            timer = setInterval(() => {
                //循环展示图片
                i++;
                //如果已经跳到最后一张，就再次回到第一张
                if (i > imgArr.length - 1) {
                    i = 0;
                }
                //给圆点添加样式，开始运行该函数
                addStyleI(i);
                //图片标签地址（src属性）
                img.src = imgArr[i];
            }, 1000);
        }
        playTime();

        // 鼠标移入，图片暂停
        secEle.addEventListener("mouseenter", function () {
            clearInterval(timer);
            timer = null;
        });
        // 鼠标移出，图片恢复滚动
        secEle.addEventListener("mouseleave", playTime);

        //给父节点绑定一个事件代理，点击左右按钮切换图片
        secEle.addEventListener("click", function (e) {
            let event = e || window.event;
            //点击左右按钮切换图片
            if (event.target.className == "left iconfont icon-anniu_jiantouxiangzuo") {
                i--;
            }
            if (event.target.className == "right iconfont icon-anniu-jiantouxiangyou") {
                i++;
            }
            if (i < 0) {
                i = imgArr.length - 1;
            }
            if (i == imgArr.length) {//3
                i = 0;
            }
            img.src = imgArr[i];
            addStyleI(i);
            //点击小圆点可以切换到对应的图片上
            if (event.target.nodeName == "I") {
                console.log("11111");
                //获得点击的圆点的自定义索引值
                cirI = event.target.dataset.index;
                //替换图片
                img.src = imgArr[cirI];
                //更改圆点样式
                addStyleI(cirI);
                //每当点击小圆点，i的值就会被赋成圆点下标的值
                i = cirI;
            }
        });

        //暂停图片滚动
        function picScroll() {
            clearInterval(timer);
        }

        //生成圆点
        function creatCircle(num) {
            //创建一个空数组来接收这个圆点
            let iArr = [];
            for (let j = 0; j < num; j++) {
                //新增圆点节点
                let circleNode = document.createElement("i");
                //再把新增的圆点节点放进圆点数组中
                iArr.push(circleNode);
            }
            //完成后，返回该数组
            return iArr;
        }

        //给圆点添加样式
        function addStyleI(index) {
            //圆点的默认颜色是灰色
            [...iEle].forEach(node => node.style.backgroundColor = "gray");
            //当跳到该图片时，圆点变成白色
            iEle[index].style.backgroundColor = "white";
        }

# javascript # html # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区