javascript-基础（八）轮播图，XHR

作业内容：

1: 实现鼠标悬停时自动停止播放, 离开时又自动播放 

2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放 

实例

        let autoInter = setInterval(
      (arr) => {
        let i = arr.shift();
        arr.push(i);
        btns[i].dispatchEvent(new Event("click"));
        console.log(arr);
      },
      5000,
      Object.keys(btns)
    );
    // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
    imgs.forEach((i) => {
      i.onmouseover = function () {
        clearInterval(autoInter);
        console.log("over");
      };
      i.onmouseout = function () {
        autoInter = setInterval(
          (arr) => {
            let i = arr.shift();
            arr.push(i);
            btns[i].dispatchEvent(new Event("click"));
            console.log(arr);
          },
          5000,
          Object.keys(btns)
        );
        console.log("out");
      };
    });
    // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放
        function getcurrentindex() {
      for (i = 0; i < 3; i++) {
        if (imgs[i].classList.contains("active")) {
          return i;
        }
      }
    }
    function nextpage() {
      str = "012012";
      arr = str.substr(getcurrentindex(), 2);
      tag = arr.split("");
      console.log(tag)
      tagimg = imgs[tag[0]];
      tagbtn = btns[tag[0]];

      nextimg = imgs[tag[1]];
      nextbtn = btns[tag[1]];
      
      tagbtn.classList.remove("active");
      tagimg.classList.remove("active");

      nextimg.classList.add("active");
      nextbtn.classList.add("active");
    }

3. 实例演示 xhr对象的使用

实例

        function getUser1(btn) {
            // 1. 创建xhr
            const xhr = new XMLHttpRequest;
            // 2. 设置响应类型
            xhr.responseType = 'json'
            // 3. 配置参数
            let url = 'http://tptest.com/users.php?id=2'
            xhr.open('GET', url);
            // 4. 请求成功的回调
            xhr.onload = () => {// 返回的值
            console.log(xhr.response);}
            // 5. 请求失败的回调信息
            xhr.onerror = () => {
            // 返回的值
            console.log('请求错误');}
           // 6. 发起xhr请求
            xhr.send(null)
        }