淡入淡出轮播图（自己理解）

淡入淡出轮播图

 //轮播图部分(淡入淡出)
  //1.获取元素
  var obanner = $('.coursel');
  var olis = $('.coursel li');
  var oprev = $('.prev');
  var onext = $('.next');
  var circles = $('.circle ul li');
  var index = 0;//激活状态的索引

  //右点击事件-----------------------------------------------------------------
  onext.click(function () {
    //判断index是否小于图片的长度
    if (index < olis.length - 1) {
      index++;
    } else {
      index = 0;
    }
    fadeAnimation();
    textAnimation()
  })

  //左点击事件----------------------------------------------------------------
  oprev.click(function () {
    //判断index是否大于0
    if (index > 0) {
      index--;
    } else {
      index = olis.length - 1;
    }
    fadeAnimation();
    textAnimation()
  })
  //焦点事件
  circles.click(function () {
    //让当前点击的index值给激活的index
    index=$(this).index();
    //调用动画即可
    fadeAnimation();
  })

  //封装的淡入淡出的函数--------------------------------------------------------
  function fadeAnimation() {
    //让当前的激活状态的显示,其他的隐藏
    olis.fadeOut(300);
    olis.eq(index).fadeIn(300);
    //切换焦点(先移除，再显示排他)
    circles.removeClass('activeli');
    circles.eq(index).addClass('activeli')
  }

  //封装的文字动画的函数--------------------------------------------------------
  function textAnimation() {
    //文字的动画效果
    $('.bannerinfo p').addClass('animate__animated animate__bounceInLeft');
    $('.bannerinfo .only').addClass('animate__animated animate__bounceInDown');
  }