// 自执行函数 形成闭包

(function () {


  var left = $("action-left"),
    right = $("action-right"),
    timer,
    index = 1,
    offsetWidths = document.body.clientWidth;


left.onclick = function () {
  if(index<=1) {
    index = 6
  }else {
    index--
  }
  animation(offsetWidths)
  clickChangeStop()
}

right.onclick = function () {
  //alert("下一页")
  if(index>5) {
    index = 1
  }else {
    index++
  }
  animation(-offsetWidths)
  clickChangeStop()
}

/**
 * 切换小圆点样式
 */
function clickChangeStop(){
  var li = $("swiper-spot").getElementsByTagName("li")
  clearSpotActive()
  li[index - 1].className = "active"
}

/**
 * 鼠标悬浮的时候，清除自动播放
 */
$("banner").onmouseover = function () {
  clearInterval(timer)
}

/**
 * 鼠标离开的时候，开始自动播放
 */
$("banner").onmouseout = function () {
  autoPlay()
}

/**
 * 自动播放
 */
function autoPlay() {
  timer = setInterval(function(){
    right.onclick()
  },2000)
}

/**
 * 小圆点被点击时候切换轮播图
 */
function spotClick() {
  var li = $("swiper-spot").getElementsByTagName("li")
  for(let i = 0;i<li.length;i++){
    
    li[i].onclick = function () {
      index = i + 1
      $("swiper-content").style.left = ( i * -offsetWidths ) + 'px'
      // 先把所有的li的激活样式 active 都清除
      clearSpotActive()
      // 然后为你点击的元素li单独设置激活样式
      li[i].className = "active"
    }
  }
}

/**
 * 清除所有小圆点上的激活样式
 */
function clearSpotActive() {
  var li = $("swiper-spot").getElementsByTagName("li")
  for(let i = 0;i<li.length;i++){
    li[i].className = ""
  }
}

/**
 * 动画切换函数
 * @param {*} offset 
 */
function animation (offset) {
  var juli = parseInt($("swiper-content").style.left) + offset;
  if(juli < getFullWidth()){
    $("swiper-content").style.left = "0px"
  } else if (juli > 0) {
    $("swiper-content").style.left = getFullWidth() + 'px'
  }else {
    $("swiper-content").style.left = juli + 'px'
  }
} 



/**
 * 获取最后一张图片的距离 图片数量 * 单个图片宽度
 */
function getFullWidth () {
  let len = ($("swiper-content").getElementsByTagName("li").length) - 1
  return len * - offsetWidths
}


/**
 * 获取元素
 * @param {*} className 
 */
function $(className){
  return document.getElementsByClassName(className)[0]
}



autoPlay()
spotClick()


})()