前言

在JS中经常会有实现轮播图效果的实现，它的实现很简单，需要知道点击事件的触发，以及操作Element的属性的方法就可以实现轮播的效果哦！通常有两种比较简单常见的轮播方式。话不多说，上"题"。

题目阐述

用户通过点击可以切换图片背景。

• 第一种：中间的一列的轮播

1. 用户点击图中中间位置带序号的类似按钮，
2. 背景会切换到对应的背景图片，且点亮当前点击后的类似按钮，
3. 当点击下一个按钮时，背景图片会切换，并且当前类似按钮点亮，其他类似按钮恢复。

• 第二种：左右两边的轮播

1. 用户点击图中左端或者右端位置带的类似按钮，
2. 背景会按顺序背景图片，
3. 并且若左端切换到第一张，又会从最后一张开始，
4. 若右端切换到最后一张，又会从第一张开始。

实现思路

第一种：中间的一列的轮播

1. 首先获取图片地址数组的长度，由长度确定创建多少个类似按钮（按钮数当然也可以是固定的），
2. 然后给每一个虚拟按钮绑定点击事件 ，
3. 点击事件的内容就是修改当前背景图片地址，而地址由点击的按钮的下标决定。
4. 如：点击第一个虚拟按钮就，显示第一张图片；点击第二个，显示第二张。。。

代码示例

        var imgArr = ["pic0.jpg", "pic1.jpg", "pic2.jpg", "pic3.jpg"];
        //生成轮播按钮，按钮个数由图片数组长度决定 
        var fn0 = (leng) => {
            var ul = document.querySelector("ul");
            //有多少张图片就创建多少个li
            for (i = 0; i < leng; i++) {
                var li = document.createElement("li");
                li.innerHTML = i + 1;
                ul.appendChild(li);
            }
        }
        fn0(imgArr.length);
        //中间的一列的轮播事件触发函数
        var fn1 = () => {
            var img = document.querySelector("img");
            var lis = document.querySelectorAll("ul>li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    //做法思路一：修改css属性
                    for (var v of lis) {
                        v.style.backgroundColor = "#000000";
                    }
                    this.style.backgroundColor = "pink";
                    img.src = "./images/" + imgArr[this.innerHTML - 1];

                    //做法思路二：添加或移除class
                    // for (var v of lis) {
                    //    v.classList.remove("blue");
                    // }
                    // this.classList.add("blue");
                    // img.src = imgArr[this.innerHTML - 1];
                }
            }
        }
        fn1();

第二种：左右两边的轮播

1. 获取到当前图片地址在数组存放的下标 ，
2. 获取到左边和右边的类似按钮元素，
3. 给左/右边的类似按钮元素绑定点击事件，
4. 点击事件要做到：
   • 每点击左边类似按钮一次，图片索引值减一；如果切换到第一张，让索引值等于最后一张的索引值；
   • 反之，点击右边类似按钮一次，图片索引值加一；切换到最后一张，让索引值等于第一张的索引值。

代码示例

 //左右两边的轮播事件触发函数
       var fn2 = () => {
           var left = document.querySelector(".left");
           var right = document.querySelector(".right");
           var img = document.querySelector("img");
           //获取当前图片位置下标
           var index = img.src.split("/");
           index = index[index.length - 1];
           index = imgArr.indexOf(index);

           left.onclick = function () {
               if (index == 0) {
                   index = imgArr.length;
               }
               index -= 1;
               img.src = "./images/" + imgArr[index];
           }
           right.onclick = function () {
               if (index == imgArr.length - 1) {
                   index = -1;
               }
               index += 1;
               img.src = "./images/" + imgArr[index];
           }
       }
       fn2()

总结

当然了，这只是粗糙的实现了轮播的效果；要实现炫目的轮播效果，可以合理的采用延时器，实现自动播放；添加透明度增加契合度等等，实现功能是最重要的第一步。