前言

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

题目阐述

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

  • 第一种：中间的一列的轮播
  1. 用户点击图中中间位置带序号的类似按钮，
  2. 背景会切换到对应的背景图片，且点亮当前点击后的类似按钮，
  3. 当点击下一个按钮时，背景图片会切换，并且当前类似按钮点亮，其他类似按钮恢复。
  • 第二种：左右两边的轮播

  1. 用户点击图中左端或者右端位置带的类似按钮，

  2. 背景会按顺序背景图片，

  3. 并且若左端切换到第一张，又会从最后一张开始，

  4. 若右端切换到最后一张，又会从第一张开始。

    实现思路

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

  5. 首先获取图片地址数组的长度，由长度确定创建多少个类似按钮（按钮数当然也可以是固定的），

  6. 然后给每一个虚拟按钮绑定点击事件 ，

  7. 点击事件的内容就是修改当前背景图片地址，而地址由点击的按钮的下标决定。

  8. 如：点击第一个虚拟按钮就，显示第一张图片；点击第二个，显示第二张。。。

    代码示例

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

    第二种：左右两边的轮播

  9. 获取到当前图片地址在数组存放的下标 ，

  10. 获取到左边和右边的类似按钮元素，

  11. 给左/右边的类似按钮元素绑定点击事件，

  12. 点击事件要做到：

    • 每点击左边类似按钮一次，图片索引值减一；如果切换到第一张，让索引值等于最后一张的索引值；
    • 反之，点击右边类似按钮一次，图片索引值加一；切换到最后一张，让索引值等于第一张的索引值。

    代码示例

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

    总结

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