轮播图实例演示,XHR 对象的使用

轮播图实例演示,XHR 对象的使用

1.轮播图实例演示

//获取图片与按钮元素
const imgs = document.querySelectorAll(".slider .imgs img");
const btns = document.querySelectorAll(".slider .btns span");
//点击按钮设置图片属性
function setActive() {
  imgs.forEach((item) => item.classList.remove("active"));
  btns.forEach((item) => item.classList.remove("active"));
  event.target.classList.add("active");
  imgs.forEach((item) => {
    if (item.dataset.index === event.target.dataset.index) {
      item.classList.add("active");
    }
  });
}
//Object.keys()返回一个由一个给定对象的自身可枚举属性组成的数组
let btnsarr = Object.keys(btns);
function next() {
  let i = btnsarr.shift();
  btnsarr.push(i);
  //[1,2,0]时显示的为[0,1,2]的效果,调整
  if (i <= 1) {
    i = parseInt(i) + 1;
    btns[i].dispatchEvent(new Event("click"));
  } else {
    i = parseInt(i) - 2;
    btns[i].dispatchEvent(new Event("click"));
  }
}
function previous() {
  let i = btnsarr.pop();
  btnsarr.unshift(i);
  btns[i].dispatchEvent(new Event("click"));
}
let time;
function interval() {
  //需要重复的函数,每次延迟的毫秒数,传给函数的置顶参数
  time = setInterval(next, 1500);
}
interval();
const slider = document.querySelector(".slider");
slider.onmouseover = () => {
  clearInterval(time);
};
slider.onmouseleave = () => {
  interval();
};

2.XHR 对象的使用

function getUser() {
  //创建一个xhr对象
  const xhr = new XMLHttpRequest();
  //设置从服务器拿回数据的类型
  xhr.responseType = "json";
  //配置参数,请求类型，get读操作，post写操作,请求地址,是否异步，默认值true
  xhr.open("GET", "http://0411.com/users.php");
  //成功加载时的回调函数,xhr.response为返回的值
  xhr.onload = () => {
    console.log(xhr.response);
  };
  //错误加载时的回调函数
  xhr.onerror = () => {
    console.log("error");
  };
  //发送xhr请求
  xhr.send(null);
}