JS-轮播图（圆点点击，左右侧按钮切换，自动播放）

//放入数据
//点击小圆圈，可切换对应图片，小圆圈的样式也跟随变动
//点击左右侧按钮，可来回切换图片，小圆圈样式跟随变动
//可自动切换轮播图，鼠标移入后不在自动滚动

(function(){
    var date = [
        {
            img : './image/banner.jpeg'
        },
        {
            img : './image/banner1.jpg'
        },
        {
            img : './image/banner2.jpg'
        },
        {
            img : './image/banner3.jpg'
        },
    ]

    //获取小圆圈父级
    var yuanquan = document.querySelector('.arrowheadFs')
    //获取图片父级以及本身的元素
    var ban = document.querySelector('.bander')
     var imban = ban.querySelector('img')
     //左/右切换的元素
     var left = document.querySelector('.i-left')
     var right = document.querySelector('.i-right')

    //初始化；四个小圆圈
    function init(){
        //有多少张图片，就显示多少个li标签（目的：动态生成小圆圈）
        for(let i = 0 ; i < date.length ; i++){
            //创建li标签，a标签
            var li = document.createElement('li')
            var a = document.createElement('a')
            li.appendChild(a)
            yuanquan.appendChild(li)
        }
    }
      init()


      //获取数据的下标，显示在页面上
      function change(index){
        //获取到date中的内容
        var d = date[index]
        //将获取到的dateimg给html中的src，显示在页面上
        imban.src = d.img

        //获取半透明度的那个类名
        var arrowheadFsli = ban.querySelector('.arrowheadFsli')
        //当前等于类名时，将类名更换
        if(arrowheadFsli){
            arrowheadFsli.className = ''
        }
        //当图片发生改变，那么获取圆圈的透明度样式给当前的下标，但是出现问题，透明度的圆圈应该就只有一个，这边会显示多个，为了解决该问题如上，if判断
        var li1 = yuanquan.children[index]
        li1.className = 'arrowheadFsli'
      }
     //需要设置0，将第0张默认显示在页面上
    change(0)
      
      //向左
      indexi = 0
      function left1(){
        indexi -- 
        if(indexi < 0){
            indexi = date.length - 1
        }
        change(indexi)
      }
      //向右
      function right1(){
        indexi ++
        if(indexi > date.length - 1 ){
            indexi = 0
        }
        change(indexi)
      }

      //注册事件，来回切换
      left.onclick = left1
      right.onclick = right1
      //圆圈
      for(let i = 0 ; i < yuanquan.children.length ; i++){
        var a = yuanquan.children[i]
        console.log(a)
         a.onclick = function(){
           indexi = i
             change(i)
         }
      }

      //获取banner区域
      var banner = document.querySelector('.bander')
      //自动播放
      var tirmid
      function begin(){
        if(tirmid){
            return
        }
        tirmid = setInterval(right1,1500)
      }
      begin()
      //自动播放暂停
      function cease(){
        clearTimeout(tirmid)
        tirmid = null
      }
      banner.onmousemove = cease
      banner.onmouseleave = begin

}())