轮播滚动效果+动画淡入淡出切换图片（内含demo）

起因： 

做了个滚动效果，除了自适应以外，都和腾讯AI开发平台的效果相似。

主要技术点：

1.动画淡入淡出切换图片

2.轮播滚动效果 + hover改变选中滚动状态

3.文字切换展示

1.动画淡入淡出切换图片（通过控制CSS来改变效果）

JS代码：

// 替换class达到淡入淡出的效果
  fadeIn(e) {
    e.className = "time-slider-item fadein";
  }
  fadeOut(e) {
    e.className = "time-slider-item ";
  }

  // 替换class达到loading的效果
  easeIn(e) {
    e.className = "loading-line-progress loading-line-progress-select";
  }
  easeOut(e) {
    e.className = "loading-line-progress ";
  }

  // 替换选中背景色
  selectIn(e) {
    e.className =
      "time-slider-pagination-item time-slider-pagination-item-select";
  }
  selectOut(e) {
    e.className = "time-slider-pagination-item ";
  }

CSS代码：

// loading加载,宽度从 0-> 248
.loading-line-progress-select {
  width: 248px;
  transition: width 3s ease-in;
}


// 淡入效果
.fadein {
  opacity: 100;
  filter: alpha(opacity=100);
  transition: opacity 1s linear;
}

// 选中改变颜色
.time-slider-pagination-item-select {
  background-color: rgba(29, 245, 255, 0.15);
}

2.轮播滚动效果 + hover改变选中滚动状态

React对应的HTML代码：

        

          {this.state.info.map(function(item, index, array) {
            return (
              


                

                  
{item.title}
                  {item.desc1 ? (
                    
{item.desc1}
                  ) : null}
                  {item.desc2 ? (
                    
{item.desc2}
                  ) : null}
                  {item.desc3 ? (
                    
{item.desc3}
                  ) : null}
                

                

                  {" "}
                

              
            );
          }, this)}
        
      

对应JS代码分析如下：

初始化时，设置该播放的轮播图片是第0个，info为全局获取的图片值

    this.state = {
      info: info,
      cur_img: 0
    };

设置定时轮播，如果在轮播中，清空之前的轮播，开始hover状态后的轮播

  // 自动轮播图片 + hover时候切换
  setIntervalTurn(index, isStop) {
    //申明图片数组中当前的轮播图片
    let info = document.getElementById("time-slider-cover").children;
    let pagination = document.getElementsByClassName("loading-line-progress");
    let paginationSelect = document.getElementsByClassName(
      "time-slider-pagination-item"
    );
    if (isStop) {
      window.clearInterval(timer);
      // 清空原来的背景
      for (var i = 0; i < info.length; i++) {
        this.fadeOut(info[i]);
        this.easeOut(pagination[i]);
        this.selectOut(paginationSelect[i]);
      }
    }

    let startTurn = index || 0;
    this.fadeIn(info[startTurn]);
    this.easeIn(pagination[startTurn]);
    this.selectIn(paginationSelect[startTurn]);

    //设置轮播间隔，并且改变轮播的图片
    this.setState({
        cur_img: index
      },
      () => {
        timer = window.setInterval(this.turnImgs.bind(this), 3000);
      }
    );
  }

Hover选中时，轮播对应的图片

  // hover时，选中当前，并且加载loading
  onhover(index, event) {
    this.setIntervalTurn(index, true);
  }

图片轮播函数，用于定时轮播图片

 turnImgs() {
    let self = this;
    let info = document.getElementById("time-slider-cover").children;
    let pagination = document.getElementsByClassName("loading-line-progress");
    let paginationSelect = document.getElementsByClassName(
      "time-slider-pagination-item"
    );
    let cur_img = this.state.cur_img;

    // 第一个
    if (cur_img === info.length - 1) {
      this.setState({
          cur_img: 0
        },
        () => {
          // 淡出
          self.fadeOut(info[info.length - 1]);
          self.easeOut(pagination[info.length - 1]);
          this.selectOut(paginationSelect[info.length - 1]);
          // 淡入
          self.fadeIn(info[0]);
          self.easeIn(pagination[0]);
          this.selectIn(paginationSelect[0]);
        }
      );
    }
    // 除了第一个以外的其他个
    else {
      this.setState({
          cur_img: cur_img + 1
        },
        () => {
          // 淡出
          self.fadeOut(info[self.state.cur_img - 1]);
          self.easeOut(pagination[self.state.cur_img - 1]);
          this.selectOut(paginationSelect[self.state.cur_img - 1]);
          // 淡入
          self.fadeIn(info[self.state.cur_img]);
          self.easeIn(pagination[self.state.cur_img]);
          this.selectIn(paginationSelect[self.state.cur_img]);
        }
      );
    }
  }

3.文字切换展示

主要根据 cur_img 目前的展示顺序，再从 info 里取出对应的数据，即：info[cur_img].text 的形式， 同步切换文字

        

          

            {this.state.info.map(function(item, index, array) {
              return (
                

                  

                    

                      

                        {" "}
                      
                      

                        {item.subTitle}
                      
                    
                  
                  

                    

                  
                
              );
            }, this)}
          
        

DEMO效果

点击查看：codepen例子

相关链接

1.【借鉴平台】腾讯AI开发平台

2.【动效学习参考】CSS动画简介

3.【淡入淡出效果】基于CSS3实现淡入（fadeIn）淡出（fadeOut）效果