JS相关例题

for循环相关例题

1. 通过循环输出1-100中的所有7的倍数及包含7的数字

 for (var i = 0; i < 100; i++) {
        var num = i + 1;
        if (num % 7 == 0 || num % 10 == 7 || parseInt(num / 10) == 7) {
          console.log(num);
        }
      }
      //运行结果为：7,14,17,21,27,28,35,37,42,47,49,56,57,63,67,70,71,72,73,74,75,76,77,78,79,84,87,91,97,98

2. 通过循环输出100-999之间的所有水仙花数

 for (var i = 100; i <= 999; i++) {
        var bai = parseInt(i / 100);
        var shi = parseInt((i % 100) / 10);
        var ge = parseInt(i % 10);
        if (Math.pow(bai, 3) + Math.pow(shi, 3) + Math.pow(ge, 3) == i) {
          console.log(`${i}是水仙花数`);
        }
      }
 //结果为：153是水仙花数；370是水仙花数；371是水仙花数；407是水仙花数

3. 输出1-100中第一个含有7的数字

for (var i = 1; i <= 100; i++) {
        if (i % 10 == 7 || parseInt(i / 10) == 7) {
          console.log(i);
          break;
        }
      }
      //结果为：7

4.一张纸的厚度是0.08mm，对折多少次后能达到珠穆朗玛峰的高度（8848.13m)?

 var height = 0.08;
      for (var i = 1; i <= 10000; i++) {
        height = 2 * height;
        if (height >= 8848130) {
          console.log(`应该对折${i}次`);
          break;
        }
      }
//结果为：47

5. 一个小球从100米高度自由落体，当小球碰撞地面时，小球反弹高度为上一个下落高度的一半，当小球碰地100次时小球走过的路程。

 var score = 50; //该变量记录碰撞前的高度
      var sum = 100; //记录第n次碰撞时，小球走过的路程
      for (var i = 1; i < 100; i++) {
        sum += 2 * score;
        score = score / 2;
      }
      console.log(`总距离为${sum}米`);
 //结果为：总距离为300米

6. 求1-100之间数字的平均数

var sum = 0;
      var average = 0;
      for (var i = 1; i <= 100; i++) {
        sum += i;
      }
      average = sum / 100;
      console.log(average);
 //结果为：50.5

7. 求1-100之间所有偶数和奇数的和

 var sum1 = 0,
        sum2 = 0;
      for (var i = 1; i <= 100; i++) {
        if (i % 2 != 0) {
          sum1 += i;
        } else {
          sum2 += i;
        }
      }
      var sum = sum1 + sum2;
      console.log(sum);
//结果为：5050

8. 输出1-100之间能被3整除的和

      var sum = 0;
      for (var i = 1; i <= 100; i++) {
        if (i % 3 == 0) {
          sum += i;
        }     
      }
      console.log(sum);
      //结果为：1683

9. 用循环语句输出三角形

 for (var i = 0; i < 3; i++) {
        for (var j = 0; j <= i; j++) {
          document.write('* ');
        }
        document.write('<br>');
      }
      for (var i = 0; i < 3; i++) {
        for (var j = 3; j > i; j--) {
          document.write('* ');
        }
        document.write('<br>');
      }

10. 羽毛球拍3元，羽毛球0.5元，运动鞋5元。问客户有200元。如何规划200元购买商品（要求每一样商品至少一件）,输出所有的购买方案。

 var money = 0;
      for (var i = 1; i < 66; i++) {
        for (var j = 1; j < 400; j++) {
          for (var k = 1; k < 40; k++) {
            if (3 * i + 0.5 * j + 5 * k <= 200) {
              money++;
              console.log(`羽毛球拍${i}副，羽毛球${j}个，运动鞋${k}双<hr>`);
            }
          }
        }
      }
      console.log(money);

11. 羽毛球拍15元，球3元，水2元。200元每种至少一个，有多少种可能？

 var count = 0;
      for (var i = 1; i < 13; i++) {
        for (var j = 1; j < 66; j++) {
          for (var k = 1; k < 100; k++) {
            if (i * 15 + j * 3 + 2 * k <= 200) {
              count++;
              // console.log();
            }
          }
        }
      }
      console.log(count);
//结果为：12783

12. 凑钱，1，2，5凑20元有多少种可能？

var count = 0;
      for (var i = 0; i <= 20; i++) {
        for (var j = 0; j <= 10; j++) {
          for (var k = 0; k <= 4; k++) {
            if (i + j * 2 + k * 5 == 20) {
              count++;
            }
          }
        }
      }
      console.log(count);
 //结果为：29

13. 判断101-200之间有多少个素数？

  var count = 0;
      for (var i = 101; i <= 200; i++) {
        var flag = true;
        for (var j = 2; j < i; j++) {
          if (i % j == 0) {
            flag = false;
          }
        }
        if (flag) {
          count++;
          console.log(`这些素数是${i}`);
        }
      }
      console.log(`共有${count}个素数`);

14. 打印出所有的水仙花数？（水仙花数指一个三位数，其各位数字立方和等于该数字本身比如153=1的三次方+5的三次方+3的三次方）

 for (var i = 100; i <= 999; i++) {
        var bai = parseInt(i / 100);
        var shi = parseInt((i % 100) / 10);
        var ge = parseInt(i % 10);
        if (Math.pow(bai, 3) + Math.pow(shi, 3) + Math.pow(ge, 3) == i) {
          console.log(i);
        }
      }
 //结果为：153；370；371；407

15. 一个数如果恰好等于它的因子之和，这个数被称为完数。比如6=1+2+3 编程求出1000以内的所有完数

var sum = 0;
      for (var i = 2; i <= 1000; i++) {
        sum = 1;
        for (var j = 2; j < i; j++) {
          if (i % j == 0) {
            sum += j;
          }
        }
        if (sum == i) {
          console.log(`${sum}`);
        }
      }
 //结果为：6；28；496

16. 有1，2，3，4四个数字，能组成多少个互不相同且无重复的三位数？

 var count = 0;
      for (var i = 1; i <= 4; i++) {
        for (var j = 1; j <= 4; j++) {
          for (var k = 1; k <= 4; k++) {
            if (i != j && j != k && i != k) {
              count++;
              console.log(`${i * 100 + j * 10 + k}<hr>`);
            }
          }
        }
      }
      console.log(`能组成${count}个三位数`);

17. 猴子吃桃问题：猴子第一天摘了若干个桃子，当即吃了一半，还不过瘾又多吃了一个。第二天早上又吃了剩下桃子的一半，之后又多吃了一个。以后每天早上都是一样。到第10天时发现只剩下1个桃子，问猴子第一天共摘了多少个桃子？

     var a = 1;//初始
      for (var i = 1; i < 10; i++) {
        var temp = a + 1;桃子数量
        a = temp * 2;
      }
      console.log(a);
      //1534

18. 有一对幼兔，幼兔一个月后长成小兔，小兔一个月后长成成兔并生下一对幼兔，问8个月后有多少对兔子，成兔，小兔，幼兔对数分别是多少？

 var you = 1;
      var cheng = 0;
      var xiao = 0;
      var sum = 1;
       for (var i = 1; i <= 8; i++) {
        var temp = you;
        you = cheng + xiao;
        xiao = temp;
        cheng = you;
        sum = you + cheng + xiao;
      }
      console.log(  '八个月后共有' +sum + '对兔子，其中成兔,幼兔和小兔的数量分别是' + cheng + '对，' +  you + '对,' + xiao + '对'
      );
//结果为：八个月后共有34对兔子，其中成兔,幼兔和小兔的数量分别是13对，13对,8对

20. 打印九九乘法表

 var str = '';
      for (var i = 1; i <= 9; i++) {
        //有多少行
        for (var j = 1; j <= i; j++) {
          str += j + '*' + 1 + '=' + i * j;
        }
        str += '\n';
      }
      console.log(str);

21. 求两个数的最大公约数（辗转相除法）

var num1 = Math.floor(Math.random() * (100 + 1) + 50); //生成一个从[50，150]的随机数。
var num2 = Math.floor(Math.random() * (100 + 1) + 50);
//1.求两个数中的最大值和最小值
      var max = num1 > num2 ? num1 : num2;
      var min = num1 + num2 - max;
      //2.分别用最大值和最小值取余，当余数不为0时，将min赋值给max,本次的余数赋值给min,重新取余。直到某一次取余余数为0，此时min中的数字就是最大公约数。
      while (max % min != 0) {
        var temp = max % min;
        max = min;
        min = temp;
      }
      document.write(`${num1}和${num2}的最大公约数是${min},<br>`);

22. 求1-100中所有的偶数的和（while循环）

var sum = 0;
      var numCurrent = 1;
      while (numCurrent <= 100) {
        if (numCurrent % 2 == 0) {
          sum += numCurrent;
        }
        numCurrent++;
      }
      document.write(sum);
      //2550

数组相关例题

1. 冒泡排序

for (var i = 0; i < arr1.length - 1; i++) {
    //控制对应的趟数中需要比较的次数 
    for (var j = 0; j < arr1.length - i - 1; j++) {
      // 判断第j次比较中下标为j的元素和后面相邻元素的大小关系
      if (arr1[j] > arr1[j + 1]) {
        var temp = arr1[j];
        arr1[j] = arr1[j + 1];
        arr1[j + 1] = temp;
      }
    }
  }
  console.log(arr1);

2. 定义一个数组存储10个随机整数，随机范围[10,20],求数组中的最大值

 var arr1 = [];
  for (var i = 0; i < 10; i++) {
    var numR = Math.floor(Math.random() * 11 + 10);
    arr1.push(numR);
  }
  // 降序排序
  for (var i = 0; i < arr1.length - 1; i++) {
    for (var j = 0; j < arr1.length - i - 1; j++) {
      if (arr1[j] < arr1[j + 1]) {
        var temp = arr1[j];
        arr1[j] = arr1[j + 1];
        arr1[j + 1] = temp;
      }
    }
  }
  console.log(arr1);
  document.write(`最大值为${arr1[0]}`);

3. 定义数组存储10个随机整数，[5,15]求数组中的最大值对应的下标

var arr2 = [];
    for (var i = 0; i < 10; i++) {
      var numR = Math.floor(Math.random() * 11 + 5);
      arr2.push(numR);
    }
    // 方案1
    //获取最大值
    var max = arr2[0];
    for (var i = 0; i < 10; i++) {
      if (max < arr2[i]) {
        max = arr2[i];
      }
    }
    //获取最大值的坐标
    for (var i = 0; i < 10; i++) {
      if (arr2[i] == max) {
        document.write(`<hr>${i}为最大值<hr>`);
      }
    }
    // 方案2
    var arr3 = arr2.slice();
    for (var i = 0; i < 9; i++) {
      for (var j = 0; j < 9 - i; j++) {
        if (arr3[j] < arr3[j + 1]) {
          var temp = arr3[j];
          arr3[j] = arr3[j + 1];
          arr3[j + 1] = temp;
        }
      }
    }
    var max = arr3[0];
    //获取最大值的坐标
    for (var i = 0; i < 10; i++) {
      if (arr2[i] == max) {
        document.write(`<hr>${i}为最大值<hr>`);
      }
    }

4. 定义一个4*4的二维数组，存储16个随机整数，随机范围[10,20]

var arr2 = [];
  for (var i = 0; i < 4; i++) {
    var arr3 = [];
    for (var j = 0; j < 4; j++) {
      var numR = Math.floor(Math.random() * 11 + 10);
      arr3.push(numR);
    }
    arr2.push(arr3);
  }
  console.log(arr2);

5. 求上面4*4的二维数组中的最大值及最大值对应的下标

var max = arr2[0][0];
  // 求最大值
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      if (max < arr2[i][j]) {
        max = arr2[i][j];
      }
    }
  }
  // 获取二维数组中最大值的坐标
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      if (max == arr2[i][j]) {
        document.write(`最大值${max}的坐标${i},${j}<hr>`)
      }
    }
  }

6. 定义一个3*3的二维数组，存储9个随机整数，随机范围为[5,15]。求该二维数组中的马鞍点及对应坐标(鞍点对应的值为当前行中最大，并且对应列中最小)

 var arr3 = [];
  for (var i = 0; i < 3; i++) {
    var arr4 = [];
    for (var j = 0; j < 3; j++) {
      var numR = Math.floor(Math.random() * 11 + 5);
      arr4.push(numR);
    }
    arr3.push(arr4);
  }
  console.log(arr3);
  //求鞍点
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      var temp = arr3[i][j]; //取出对应的数据
      var orTrue = true; //该变量存储当前的数据是否是鞍点，假设是鞍点
      //验证temp是否是对应行中最大的
      for (var k = 0; k < 3; k++) {
        if (temp < arr3[i][k]) {
          orTrue = false;
          break;
        }
      }
      //当temp是同一行最大的时验证是否是同一列中最小的
      if (orTrue) {
        for (var k = 0; k < 3; k++) {
          //验证temp是否是同一列中最小的
          if (temp > arr3[k][j]) {
            orTrue = false;
            break;
          }
        }
        if (orTrue) {
          document.write(`鞍点位置为第${i}行，第${j}列的数据<hr>`);
        }
      }
    }
  }

7. 定义一个数组含有20个随机整数[10, 100],去除数组中重复的随机数？

 var arr = [];
      var arr1 = [];
      for (var i = 0; i < 20; i++) {
        var num = Math.floor(Math.random() * 91 + 10);
        arr.push(num);
        arr.sort(function (num1, num2) {
          return num1 - num2;
        });
      }
      for (var j = 1; j < arr.length; j++) {
        if (arr[j] == arr[j + 1]) {
          arr1.push(arr[j]);
          arr.splice(j, 1);
        }
      }
      console.log(arr);
      console.log(arr1);

8. 定义一个数组含有10个随机整数[5, 15],求数组中的第二大值？

var arr = [];
      for (var i = 0; i < 10; i++) {
        var num = Math.floor(Math.random() * 11 + 5);
        arr.push(num);
        for (var i = 0; i < arr.length - 1; i++) {
          for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] < arr[j + 1]) {
              var temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
            }
            if (arr[j] == arr[j + 1]) {
              arr.splice(j, 1);
            }
          }
        }
      }
      console.log(arr);
      console.log(arr[1]);

9. 定义一个5行5列的二维数组存储[3,10]的随机整数，求数组中每行的最大值和每列的最小值及整个二维数组中的最小值

 var arr1 = [];
      for (var i = 0; i < 5; i++) {
        var arr2 = [];
        for (var j = 0; j < 5; j++) {
          var num = Math.floor(Math.random() * 8 + 3);
          arr2.push(num);
        }
        arr1.push(arr2);
      }
      console.log(arr1);
      // 每一行的最大值;
      for (var i = 0; i < arr1.length; i++) {
        var max = arr1[i][0];
        for (var j = 0; j < arr1.length; j++) {
          if (max < arr1[i][j]) {
            max = arr1[i][j];
          }
        }
        console.log(`第${i + 1}行上的最大值为${max}`);
      }

      //每列的最小值
      for (var i = 0; i < 5; i++) {
        var min = arr1[0][i];
        for (var j = 0; j < 5; j++) {
          if (min > arr1[j][i]) {
            min = arr1[j][i];
          }
        }
        console.log(`第${i + 1}列上的最小值为${min}`);
      }
        //整个数组中的最小值
      var temp = arr1[0][0];
      for (var i = 0; i < arr1.length; i++) {
        for (var j = 0; j < arr1.length; j++) {
          if (temp > arr1[i][j]) {
            temp = arr1[i][j];
          }
        }
      }
      console.log(temp);

10. 定义一个3行3列的二维数组，存储[15,25]的随机整数，求该二维数组的所有鞍点下标？（鞍点：即该位置的数字及时对应行的最大值同时也是对应列的最小值）（经典思考题）

 //创建一个3*3的二维数组
      var arr1 = [];
      for (var i = 0; i < 3; i++) {
        var arr2 = [];
        for (var j = 0; j < 3; j++) {
          var num = Math.floor(Math.random() * 11 + 15);
          arr2.push(num);
        }
        arr1.push(arr2);
      }
      console.log(arr1);

      //鞍点
      for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
          var temp = arr1[i][j]; //假设temp为鞍点
          var orFalse = true;
          //判断每一行是否是最大值
          for (var k = 0; k < 3; k++) {
            if (temp < arr1[i][k]) {
              orFalse = false;
            }
          }
          //如果是每一行中最大，比较是否是每一列中最小的
          if (orFalse) {
            for (var k = 0; k < 3; k++) {
              if (temp > arr1[k][j]) {
                orFalse = false;
                break;
              }
            }
          }
          if (orFalse) {
            console.log(`鞍点的位置为第${i}行，第${j}列`);
          }
        }
      }

DOM操作

 <div class="nav">
      <button class="select">放大</button>
      <button>旋转</button>
      <button>平移</button>
    </div>
    <div class="img">
      <img id="content" src="1.jpeg" alt="" class="translate1" />
    </div>

operate1();
var t_btns = document.querySelectorAll('.nav button');
var img = document.querySelector('.img img');
for (var i = 0; i < t_btns.length; i++) {
  var fun = function (index) {
    return function () {
      //修改选择元素的class属性
      changeClassName(t_btns, index);
      if (index == 0) {
        //第一个按钮
        img.className = 'translate1';
      } else if (index == 1) {
        //第二个按钮
        img.className = 'translate2';
      } else {
        //第三个按钮
        img.className = 'translate3';
      }
    }
  }
  t_btns[i].onclick = fun(i);
}
//对三个按钮进行class属性修改
var btns = document.querySelectorAll('.nav button');
function changeClassName (btns, index) {
  for (var i = 0; i < btns.length; i++) {
    btns[i].removeAttribute('class');
  }
  //添加class属性
  btns[index].setAttribute("class", "select");
}

<div class="choose">
      <button class="select">选择1</button>
      <button>选择2</button>
      <button>选择3</button>
    </div>
    <div class="content1"></div>

//对三个按钮进行class属性修改
var btns = document.querySelectorAll('.nav button');
function changeClassName (btns, index) {
  for (var i = 0; i < btns.length; i++) {
    btns[i].removeAttribute('class');
  }
  //添加class属性
  btns[index].setAttribute("class", "select");
}
var t_btns = document.querySelectorAll('.choose button');
for (var i = 0; i < t_btns.length; i++) {
  var fun = function (index) {
    return function () {
      //修改选择元素的class属性
      changeClassName(t_btns, index);
      if (index == 0) {
        //第一个按钮
        operate1();
      } else if (index == 1) {
        //第二个按钮
        operata2();
      } else {
        //第三个按钮
        operata3();
      }
    }
  }
  t_btns[i].onclick = fun(i);
}
//定义函数分别完成不同按钮被点击时的操作
function operate1 () {
  var h1 = document.createElement('h1');
  h1.innerHTML = "欢迎来到商品详情页面";
  var oldNode = document.querySelector('.content1 h1');
  if (oldNode) {
    //不为空
    document.querySelector('.content1').replaceChild(h1, oldNode);
  } else {
    //为空
    document.querySelector('.content1').appendChild(h1);
  }
}
function operata2 () {
  var h1 = document.createElement('h1');
  h1.innerHTML = "欢迎来到商品规格页面";
  var oldNode = document.querySelector('.content1 h1');
  document.querySelector('.content1').replaceChild(h1, oldNode);
}
function operata3 () {
  var h1 = document.createElement('h1');
  h1.innerHTML = "欢迎来到商品评论页面";
  var oldNode = document.querySelector('.content1 h1');
  document.querySelector('.content1').replaceChild(h1, oldNode);
}

 <div class="comment">
      <div class="sendMsg">
        <textarea class="send_message" cols="50" rows="10"></textarea>
      </div>
      <div class="send_btn">
        <button class="comment_btn">评论</button>
      </div>
      <div class="comments">
        <!-- 防止所有的评论内容 -->
      </div>

var comment_btn = document.querySelector('.comment_btn');
var message_input = document.querySelector('textarea');
var comments = document.querySelector('.comments');
comment_btn.onclick = function(){
  //获取输入框中内容 
  var message_text = message_input.value;
  //根据内容构建一条评论
  var one_comment = document.createElement('div');
  one_comment.className = "one_comment";
  one_comment.innerHTML = `<div class="user_infor">
          <img src="https://img2.baidu.com/it/u=3436121203,3749922833&fm=26&fmt=auto&gp=0.jpg" alt=""
            class="user_photo">
          <span>樱桃小丸子</span>
        </div>
        <div class="message">${message_text}</div>
        <div class="operate">
          <button class="delete">删除</button>
        </div>`; 
  //将评论添加到comments 
  var first_comment = document.querySelector('.one_comment');
  if(first_comment){
    //插入原有评论的前面 
    comments.insertBefore(one_comment, first_comment);
  }else{
    //添加第一条评论
    comments.appendChild(one_comment); 
  }
  //获取最新增加的删除按钮
  var delete_btn = document.querySelector('.delete');
  delete_btn.onclick = function(){
    // this关键词：this是一个动态变量，用来获取直接触发某一个事件的某一个元素节点。简单理解：将来触发对应事件的是哪一个DOM元素，this就指代哪一个DOM元素。
    this.parentElement.parentElement.remove();
  }
}

• 左右滑动轮播图
  

 <div class="window">
    <div class="content">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/268aadece1368da98fcf5553b657cdb3.jpg?w=2452&h=920" alt="">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7f2e0acc18c3d9b6a9c1ab9e8281fbd6.jpg?thumb=1&w=1839&h=690&f=webp&q=90"
        alt="">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1c3e97686468231f3f78048d7f2b7fdc.jpg?thumb=1&w=1839&h=690&f=webp&q=90"
        alt="">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5e896d87c53a449509c14701673098bb.jpg?thumb=1&w=1839&h=690&f=webp&q=90"
        alt="">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/268aadece1368da98fcf5553b657cdb3.jpg?w=2452&h=920" alt="">
    </div>
    <div class="pages">
      <span class="circle select"></span><span class="circle"></span><span class="circle"></span><span
        class="circle"></span>
    </div>
    <div class="btns">
      <i class="iconfont icon-zuojiantou" id="pre"></i>
      <i class="iconfont icon-jiantou2" id="next"></i>
    </div>
  </div>

//获取图片尺寸
var img = document.querySelector(".content img");
var win = document.querySelector('.window');
// window代表浏览器窗口, onload-代表浏览器窗口中当前显示的页面页面中所有资源全部加载完毕(包括：文字，图片，视频，音频等)
window.onload = function () {
  var height = getComputedStyle(img).height;
  //将高度应用到div 
  win.style.height = height;
  // 开始自动轮播
  autoSwipe();
}
// 定义一个函数完成内容层相对于window的div移动
var content = document.querySelector('.content');
// 该方法用来完成某一次轮播
function movePicture (index, callBack) {
  //获取本次轮播开始前content相对于window的位置
  var begin = parseFloat(getComputedStyle(content).left);
  //获取本次轮播，content标签的结束位置
  var end = -parseFloat(getComputedStyle(img).width) * index;
  // 获取本次轮播的总位移
  var offset = end - begin;
  //定义变量存储本次轮播一共需要多少步完成
  var totle_step = 10;
  //定义一个变量存储当前一共完成的步数
  var current_step = 0;
  //定义计时器完成本次轮播
  var timer = setInterval(function () {
    current_step++;
    content.style.left = (begin + (offset / totle_step) * current_step) + "px";
    if (current_step >= totle_step) {
      //终止本次轮播
      clearInterval(timer);
      // 调用回调函数通知外界本次轮播结束
      callBack();
    }
  }, 100);
}
// 定义函数完成自动轮播
var current_page = 0; //代表当前正在显示的页面下标
var timer = null; //定义变量存储一个自动轮播的计时器
function autoSwipe () {
  timer = setInterval(function () {
    current_page++;
    movePicture(current_page, function () {
      if (current_page >= 4) {
        current_page = -1;
        content.style.left = 0;
      }
      // 切换圆点
      changeCircle(current_page == -1 ? 0 : current_page);
    });
  }, 3000);
}
// 定义函数完成自动轮播时，高亮圆点的切换
var circles = document.querySelectorAll('.circle');
function changeCircle (index) {
  for (var i = 0; i < circles.length; i++) {
    circles[i].className = "circle";
  }
  circles[index].className = "circle select";
}
// 为圆点添加点击事件实现手动轮播
var orScroll = false; //定义变量存储当前轮播图是否在滚动，默认为false
for (var i = 0; i < circles.length; i++) {
  var fun = function (index) {
    return function () {
      if (orScroll == false) {
        orScroll = true;
        //完成手动轮播, 先停止自动轮播
        clearInterval(timer);
        // 修改高亮的点
        changeCircle(index);
        //获取当前点击的圆点的下标
        current_page = index;
        movePicture(index, function () {
          //重新开启自动轮播 
          autoSwipe();
          orScroll = false;
        });
      }
    }
  }
  circles[i].onclick = fun(i);
}
//获取左右按钮绑定点击事件
var clickBtns = document.querySelectorAll('.iconfont');
for (var i = 0; i < clickBtns.length; i++) {
  clickBtns[i].onclick = function () {
    //完成手动轮播
    if (this.getAttribute('id') == "pre") {
      //左侧按钮被点击
      current_page--;
      current_page = current_page == -1 ? 3 : current_page;
    } else {
      //右侧按钮被点击
      current_page++;
      current_page = current_page == 4 ? 0 : current_page;
    }
    //暂停自动轮播
    clearInterval(timer);
    //修改红点
    changeCircle(current_page);
    //完成本次轮播
    movePicture(current_page, function () {
      autoSwipe(); //开启自动轮播
    });
  }
}

• 小米官网轮播图
  

 <div class="window">
      <div class="content">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/63bab54049c48fa65494c16f7e2d60e4.png?w=2452&h=920"
          alt=""
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/933683565f5273b4591403daab09212c.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
          alt=""
          class="normal"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1c3e97686468231f3f78048d7f2b7fdc.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
          alt=""
          class="normal"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5e896d87c53a449509c14701673098bb.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
          alt=""
          class="normal"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/63bab54049c48fa65494c16f7e2d60e4.png?w=2452&h=920"
          alt=""
        />
      </div>
      <div class="pages">
        <span class="circle select"></span><span class="circle"></span
        ><span class="circle"></span><span class="circle"></span>
      </div>
      <div class="font1">
        <i class="iconfont icon-zuojiantou"></i>
        <i class="iconfont"></i>
      </div>
    </div>

//获取图片
var img = document.querySelector(".content img");
var content = document.querySelector(".content");
window.onload = function () {
  var height = getComputedStyle(img).height;
  content.style.height = height;
  autoChange();
}

//定义函数完成某一次轮播图的转换
var imgs = document.querySelectorAll("img");
var oldIndex = 0; var currentIndex = 0;
//定义函数完成轮播图的转换
function changePicture (callBack) {
  for (var i = 0; i < imgs.length; i++) {
    //先全部设置为隐藏
    imgs[i].className = "normal";
  }
  //分别设置隐藏和显示的class的两个图片
  imgs[oldIndex].className = "hide";
  imgs[currentIndex].className = "show";
  //通知外界，本次轮播结束
  setTimeout(function () {
    callBack();
  }, 1000);
}
//切换圆点的高两色
var circles = document.querySelectorAll(".circle");
function changePages () {
  for (var i = 0; i < circles.length; i++) {
    circles[i].className = 'circle';
  }
  circles[currentIndex].className = 'circle select';
}
//定义函数完成自动切换
var timer = null;
function autoChange () {
  timer = setInterval(function () {
    oldIndex = currentIndex;
    currentIndex++;
    changePicture(function () {
      if (currentIndex >= 4) {
        currentIndex = 0;
      }
      changePages();
    });
  }, 5000);
}

//设置手动轮播
var orchange = false;//判断是否正在进行自动轮播
for (var i = 0; i < circles.length; i++) {
  circles[i].index = i;
  circles[i].onclick = function () {
    if (orchange == false) {
      orchange = true;
      //清楚自动轮播
      clearInterval(timer);
      //添加手动轮播
      oldIndex = currentIndex;
      currentIndex = this.index;
      changePages();
      //开启自动轮播
      changePicture(function () {
        autoChange();
        orchange = false;
      })
    }
  }
}