原生JS制作简单的轮播图

**第一步：**制作出能够容纳轮播图片的大容器，里面再分三个区域

1. wrap : 轮播的图片
2. pagenation:轮播图下方的小点
3. boXX:向前和向后移动的箭头

<div class="banner">
		//图片
        <div class="wrap">
            <div class="item">
                <img src="../img/01.png" alt="">
            </div>
            <div class="item">
                <img src="../img/02.png" alt="">
            </div>
            <div class="item">
                <img src="../img/03.png" alt="">
            </div>
            <div class="item">
                <img src="../img/04.png" alt="">
            </div>
        </div>
		//小点  这里的iD是为了能够根据该ID信息来切换对应图片
        <div class="pagenation">
            <div id="pagenation-item0"></div>
            <div id="pagenation-item1"></div>
            <div id="pagenation-item2"></div>
            <div id="pagenation-item3"></div>
        </div>
		//箭头
        <div class="bo21"></div>
        <div class="bo22"></div>
    </div>

再设置一下各自的位置，毕竟框架有了，位置还得自己调

<style>
        .banner {
            width: 700px;
            margin: 100px auto;
            position: relative;
            height: 500px;
        }
        //给图片固定高度等于整体容器高度，防止图片失真，并且使每张图片的整体大小比例相同
        .item img {
            width: 100%;
            height: 500px;
        }
        //图片都设置为透明，并通过定位堆叠在一起
        .item {
            width: 700px;
            position: absolute;
            opacity: 0;
        }
        //第一张图片设置为不透明，以显示在最上层
        .item:first-child {
            opacity: 1;
        }
        
        .banner .wrap {
            height: 500px;
        }
        //在图片中部位置显示小点
        .pagenation {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            bottom: 40px;
        }
        
        .pagenation>div {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: grey;
            margin-right: 10px;
            cursor: pointer;
        }
        
        .pagenation>div:last-child {
            margin-right: 0;
        }
        
        .pagenation>div:first-child {
            background: white;
        }
        //左箭头位置
        .bo21 {
            width: 0px;
            height: 0px;
            position: absolute;
            top: 225px;
            cursor: pointer;
            border: 25px transparent solid;
            border-right: 25px #888888 solid;
        }
        //右箭头位置
        .bo22 {
            width: 0px;
            height: 0px;
            position: absolute;
            top: 225px;
            left: 650px;
            cursor: pointer;
            border: 25px transparent solid;
            border-left: 25px #888888 solid;
        }
    </style>

效果图：

第二步 让图片能够动起来

 // 位置下标
        var index = 0;
        // 获取所有需要轮播的列表
        var itemList = document.getElementsByClassName("item");
        // 获取所有对应图片下方的小点，按顺序对应
        var pageItems = document.querySelectorAll(".pagenation>div");

        // 依次向前播放图片，当播完最后一张后下标设置为1
        var t1 = setInterval(function() {
            index = index >= (itemList.length - 1) ? 0 : ++index;
            xuan();

        }, 3000);


        // 鼠标进入轮播区域 停止定时器
        document.getElementsByClassName("banner")[0].onmouseover = function() {
            clearInterval(t1);

        };
        // 鼠标离开轮播区域 启动定时器
        document.getElementsByClassName("banner")[0].onmouseout = function() {
            clearInterval(t1);
            t1 = setInterval(function() {
                index = index >= (itemList.length - 1) ? 0 : ++index;
                xuan();
            }, 3000);

        };

		// 先将所有图片的透明度设置为1，对应的小点设置为初始颜色灰色
        // 在将对应下标的图片设置显示，对应的小点设置为白色
        function xuan() {
            for (var i = 0; i < itemList.length; i++) {
                itemList[i].style.opacity = 0;
                pageItems[i].style.background = "grey"
            }
            itemList[index].style.transition = "opacity 1s ease .2s"
            itemList[index].style.opacity = 1
            pageItems[index].style.background = "white"
        }

**第三步 ：**让图片能够跟随小点切换 这就需要咱们上面用到的下标index了

// 事件委托
        document.querySelector(".pagenation").onclick = function(e) {
            console.log(111);
            // 判断它是否是点击 子元素 触发？？？;
            console.log(e.target);
            if (e.target.className != "pagenation") {
                // 子元素触发
                // 获取点击的小点的ID
                var id = e.target.id;
                // 用于记录点击的小点的下标
                var pageIndex = null;
                for (var i = 0; i < pageItems.length; i++) {
                    // 将所有小点的颜色设置为初始色灰色
                    pageItems[i].style.background = "grey";
                    // 找到被点击的小点的下标
                    if (id.indexOf(i) > 0) {
                        // 赋值给标记
                        pageIndex = i;
                    }
                }
                // 设置被点击小点的颜色为白色
                e.target.style.background = "white";

                // 图片 跟随变更
                index = pageIndex;
                // 将所有图片设置为透明
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].style.opacity = 0;

                }
                // 将对应下标的图片设置为不透明
                itemList[index].style.opacity = 1;
            }
        }

**最后一步：**箭头同理

			//事件委托
			document.querySelector(".banner").onclick = function(e) {
            // 上一张
            if (e.target.className == "bo21") {
                index - 1 < 0 ? index = 3 : index--;
                xuan();
            }
            // 下一张
            if (e.target.className == "bo22") {
                index + 1 >= 4 ? index = 0 : index++;
                xuan();
            }
        }

注意：小点的数量是根据图片的数量动态添加的，每个小点必须有相对应的图片
点和箭头看个人喜好加吧