原生JavaScript学习：slideShow

2019独角兽企业重金招聘Python工程师标准>>>

function addLoadEvent(func) {
  var oldLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldLoad();
      func();
    };
  }
}

function slideShow() {
  var oBox = document.getElementById("box");
  var aUl = oBox.getElementsByTagName("ul");
  var aImg = aUl[0].getElementsByTagName("li");
  var aNum = aUl[1].getElementsByTagName("li");
  var timer = play = null;
  var i = index = 0;

  //切换按钮
  for (i = 0; i < aNum.length; i++) {
    aNum[i].index = i;
    aNum[i].onmouseover = function() {
      show(this.index);
    }
  }

  //鼠标划过关闭定时器
  oBox.onmouseover = function() {
    clearInterval(play);
  }
  //鼠标离开自动播放
  oBox.onmouserout = function() {
    autoPlay();
  }

  //自动播放函数
  function autoPlay() {
    Play = setInterval(function() {
      index++;
      index >= aImg.length && (index = 0);
      show(index);
    }, 4000);
  }
  autoPlay();

  //图片切换，淡出淡入效果
  function show(a) {
    index = a;
    var alpha = 0;
    for (i = 0; i < aNum.length; i++) {
      aNum[i].className = "";
    }
    aNum[index].className = "current";
    clearInterval(timer);

    for (i = 0; i < aImg.length; i++) {
      aImg[i].style.opacity = 0;
      aImg[i].style.filter = "alpha(opacity=0)";
    }

    timer = setInterval(function() {
      alpha += 2;
      alpha > 100 && (alpha = 100);
      aImg[index].style.opacity = alpha / 100;
      aImg[index].style.filter = "alpha(opacity = "+ alpha +")";
      alpha == 100 && clearInterval(timer)
    }, 20)
  }
}

addLoadEvent(slideShow);

转载于:https://my.oschina.net/LiyuhaoDev/blog/65092