前言

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

题目阐述

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

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

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

第二种：左右两边的轮播

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

实现思路

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

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

代码示例

        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();

第二种：左右两边的轮播

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

代码示例

 //左右两边的轮播事件触发函数
       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()

总结

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

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。