原生dom 实现 轮播图

一、实现功能如下：

        1：进入指定区域，关闭定时器；离开时，开启定时器

        2：有左右两个按键实现对图像的左右切换展示

        3：可以通过下方小圆点，实现对图像的切换展示

二、具体实现如下：

①首先创建一个基础的框架：

        html 部分：

<div style="width: 300px;height: 260px;" class="mainContainer">
        <!-- 图片展示 -->
        <div style="width: 300px;height: 200px;">
            <img style="width: 300px;height: 200px;">
        </div>
        <!-- 图片介绍 -->
        <div style="width: 300px">
            <span> </span>
            <div style="display: inline;float: right;">
                <button class="leftButton">
                    < </button>
                        <button class="rightButton"> > </button>
            </div>
        </div>
        <!-- 圆点显示 -->
        <div style="width: 300px;padding: 0;">
            <ul class="list">
                <li>
                    <div class="circle"></div>
                </li>
                <li>
                    <div class="circle"></div>
                </li>
                <li>
                    <div class="circle"></div>
                </li>
            </ul>
        </div>
    </div>

上述代码实现了：div + img + button + （空格的 ul li）

        接着是 css 部分：

    ul {
        list-style-type: none;
    }
    ul li {
        display: inline-block;
        padding: 0;

    }
    .circle {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border-style: solid;

    }
    .active {
        border-radius: 100%;
        border-style: solid;
        width: 11px;
        height: 11px;
        border-color: rgb(171, 22, 22);
    }

上述实现了 ul>li中的小黑圆点，和图片切换之后的 小红圆点

②然后是 js 部分

0：初始化，展示一个图片

        // 初始化
        imAge.src = img[0].src // 添加图片
        imAge.title = img[0].title  // 给图片添加标题
        titleText.innerText = img[0].title // 添加 文本注释
        lis[i].classList.add('active')

 1：首先有一个定时器

用于自动展示图片 (1s 做一个切换（切换前，需要移除原先的样式）)

timerId = setInterval(function () {
            lis[i].classList.remove('active')
            i == 2 ? i = 0 : i++
            imAge.src = img[i].src // 添加图片
            imAge.title = img[i].title  // 给图片添加标题
            titleText.innerText = img[i].title // 添加 文本注释
            lis[i].classList.add('active')
        }, 1000)

2：进入指定区域，关闭定时器；离开时，开启定时器

// 鼠标经过关闭定时器
        mainContainer.addEventListener('mouseenter', function () {
            clearInterval(timerId)
        })

        // 鼠标离开 开启定时器
        mainContainer.addEventListener('mouseleave', function () {
            timerId = setInterval(function () {
                lis[i].classList.remove('active')
                i == 2 ? i = 0 : i++
                imAge.src = img[i].src // 添加图片
                imAge.title = img[i].title  // 给图片添加标题
                titleText.innerText = img[i].title // 添加 文本注释
                lis[i].classList.add('active')
            }, 1000)
        })

3：有左右两个按键实现对图像的左右切换展示

        //右侧按钮
        const rightBtn = document.querySelector('.rightButton')
        rightBtn.addEventListener('click', function () {
            // console.log(11);
            lis[i].classList.remove('active')
            i == 2 ? i = 0 : i++
            imAge.src = img[i].src // 添加图片
            imAge.title = img[i].title  // 给图片添加标题
            titleText.innerText = img[i].title // 添加 文本注释
            lis[i].classList.add('active')
        })

        //左侧按钮
        const leftBtn = document.querySelector('.leftButton')
        leftBtn.addEventListener('click', function () {
            // console.log(11);
            lis[i].classList.remove('active')
            i == 0 ? i = 2 : i--
            imAge.src = img[i].src // 添加图片
            imAge.title = img[i].title  // 给图片添加标题
            titleText.innerText = img[i].title // 添加 文本注释
            lis[i].classList.add('active')
        })

4：可以通过下方小圆点，实现对图像的切换展示

// 给小圆点添加点击事件
        for(let j=0;j<3;j++){
            circleLis[j].addEventListener('click',function(){
                lis[i].classList.remove('active')
                imAge.src = img[j].src // 添加图片
                imAge.title = img[j].title  // 给图片添加标题
                titleText.innerText = img[j].title // 添加 文本注释
                lis[j].classList.add('active')
                i = j
            })
        }

三、 结果展示

轮播图