淡入淡出的轮播+图片文字动画

前几天在公司的网站上需要添加一个首页轮播效果，本公司自己的那个轮播组件效果非常的生硬。所以在网上找了一个现有的效果！在此特别的谢过大神，并奉上大神作品链接

在我使用的过程中，由于我是直接引入的轮播的JS文件，所以在预览的时候总是先显示最后一张图片，然后在显示第一张才能轮播。所以我在大神的作品的基础上做了一点修改。

通过动态的添加active类，来实现默认显示第一张。HTML文件如下：

<div class="bannerbox"> 
              <div class="lb_nav"> 
                <dl> 
                  <dd class=""/>  
                  <dd class=""/>  
                  <dd class=""/> 
                </dl> 
              </div>  
              <ul> 
                <li class="fst-li active"> 
                  <div class="containt-div"> 
                    <div class="baner-01-a"> 
                      <img src="img/firstText.png" alt=""/>  
                      <p class="bigText">124578</p>  
                      <span class="middleText" style="font-size:36px;">45788956</span>  
                      <div style="position:relative;"> 
                        <a component="$UI/system/components/justep/button/button"
                          class="btn btn-link lBbtn" label="扫码体验" xid="button1" bind-mouseenter="button1Mouseenter"
                          bind-mouseleave="button1Mouseleave"> 
                          <i xid="icon1"/>  
                          <span xid="span2">扫码体验</span> 
                        </a>  
                        <div style="position:absolute;top:37px;left:150px;"
                          class="hide"> 
                          <img src="img/wdqrcode.jpg" style="width:150px;border-radius:5px;"/> 
                        </div> 
                      </div> 
                    </div>  
                    <div class="baner-01-b"> 
                      <img src="img/firstImg.png" alt=""/> 
                    </div> 
                  </div&g