react 走马灯轮播图 两种方法：css3动画和js定时器

先看实现效果：

 这是两组轮播  方向不同 上下互不影响 

下面的两种方法都可以实现

c3动画实现起来简单 效果流畅 没的说

但是js 实现是真的很考验基础！！！什么定时器监听事件懒加载的都涉及了 可以试试 都会了的话还是动画好用啦

方法一：

c3动画实现：

实现过程：

页面代码：

用css3动画去实现的话 后面可能会有留白 解决方案就是 重复多放几张图片

比如说 需要5张图去轮播 那么就要在这五张图中再拿出前四张图放到列表后面 下面同理 也就是说 上下轮播需要10张图的话 用c3动画去实现 上下各多4张图片（重复前四张） 所以实际上 上下一共放了18张图片 

css代码：（less）

 .h-section-part2-plots-top {
        width: 1200px;
        overflow: hidden;

        ul {
          display: flex;
          margin: 0;
          padding: 0;
          list-style: none;
          animation: hotList 13s linear infinite;

          &:hover {
            animation-play-state: paused;
          }

          li {
            width: 330px;
            min-width: 330px;
            height: 240px;
            margin-top: 24px;
            margin-right: 24px;
            border-radius: 8px;
            cursor: pointer;
          }
        }

        @keyframes hotList {
          0% {
            transform: translateX(0);
          }

          20% {
            transform: translateX(-354px);
          }

          40% {
            transform: translateX(-708px);
          }

          60% {
            transform: translateX(-1068px);
          }

          80% {
            transform: translateX(-1416px);
          }

          100% {
            transform: translateX(-1770px);
          }
        }
      }

      .h-section-part2-plots-bottom {
        width: 1200px;
        overflow: hidden;

        ul {
          display: flex;
          flex-direction: row-reverse;  //反方向的话布局需要翻转一下 不然动画放的一言难尽
          margin: 0;
          padding: 0;
          list-style: none;
          animation: latestList 13s linear infinite;

          &:hover {
            animation-play-state: paused;
          }

          li {
            width: 330px;
            min-width: 330px;
            height: 240px;
            margin-top: 24px;
            margin-right: 24px;
            border-radius: 8px;
            cursor: pointer;
          }
        }

        @keyframes latestList {
          0% {
            transform: translateX(0);
          }

          20% {
            transform: translateX(354px);
          }

          40% {
            transform: translateX(708px);
          }

          60% {
            transform: translateX(1068px);
          }

          80% {
            transform: translateX(1416px);
          }

          100% {
            transform: translateX(1770px);
          }
        }
      }

介样就可以实现出来了~

拓展一下！~ （less语法）

这样看重复的代码很多 可以做下优化  less语法的封装函数调用 

// 封装一个动画的函数  将动画名和符号传进去  
// 如果上下时间和播放方式都一致的话可以都放进去
.chart-keyframes(@name, @sign) {
        @keyframes @name {
          0% {
            transform: translateX(unit(@sign * 0, px));
          }

          20% {
            transform: translateX(unit(@sign * 354, px));
          }

          40% {
            transform: translateX(unit(@sign * 708, px));
          }

          60% {
            transform: translateX(unit(@sign * 1086, px));
          }

          80% {
            transform: translateX(unit(@sign * 1416, px));
          }

          100% {
            transform: translateX(unit(@sign * 1770, px));
          }
        }

        animation: @name 13s linear infinite;
      }

      .h-section-part2-plots-top {
        width: 1200px;
        overflow: hidden;

        ul {
          display: flex;
          margin: 0;
          padding: 0;
          list-style: none;
          .chart-keyframes(hotList, -1);
          // animation: hotList 13s linear infinite;   都封装在函数里的话这里就不用写了 只需 
                                                      要在上面那行把名字和符号传过去就可以了

          &:hover {
            animation-play-state: paused;
          }

          li {
            width: 330px;
            min-width: 330px;
            height: 240px;
            margin-top: 24px;
            margin-right: 24px;

            border-radius: 8px;
            cursor: pointer;
          }
        }

        // @keyframes hotList {
        //   0% {
        //     transform: translateX(0);
        //   }

        //   20% {
        //     transform: translateX(-354px);
        //   }

        //   40% {
        //     transform: translateX(-708px);
        //   }

        //   60% {
        //     transform: translateX(-1068px);
        //   }

        //   80% {
        //     transform: translateX(-1416px);
        //   }

        //   100% {
        //     transform: translateX(-1770px);
        //   }
        // }
      }

      .h-section-part2-plots-bottom {
        width: 1200px;
        overflow: hidden;

        ul {
          display: flex;
          flex-direction: row-reverse;
          margin: 0;
          padding: 0;
          list-style: none;
          .chart-keyframes(latestList, 1);
          // animation: latestList 13s linear infinite;

          &:hover {
            animation-play-state: paused;
          }

          li {
            width: 330px;
            min-width: 330px;
            height: 240px;
            margin-top: 24px;
            margin-right: 24px;

            border-radius: 8px;
            cursor: pointer;
          }
        }

        // @keyframes latestList {
        //   0% {
        //     transform: translateX(0);
        //   }

        //   20% {
        //     transform: translateX(354px);
        //   }

        //   40% {
        //     transform: translateX(708px);
        //   }

        //   60% {
        //     transform: translateX(1068px);
        //   }

        //   80% {
        //     transform: translateX(1416px);
        //   }

        //   100% {
        //     transform: translateX(1770px);
        //   }
        // }
      }

这样就优化好了 

方法二：

js 定时器实现：

实现过程 :

需要用到的变量：

样式随便写都可以 记得超出隐藏就行

 定时器：

拿走！

leftLoopCarousel = () => {
    let { left, leftLoopCarousel } = this.state;
    clearInterval(timer);
    timer = setInterval(() => {
      left += 1;
      if (left > 354) {
        left = 0;
        let first = leftLoopCarousel.splice(0, 1);
        leftLoopCarousel.push(...first);   //切割第一位后 添加到数组最后 循环
      }
      this.setState({
        left,
        leftLoopCarousel
      });
    }, 6);
  };
  rightLoopCarousel = () => {
    let { right, rightLoopCarousel } = this.state;

    clearInterval(timer2);
    timer2 = setInterval(() => {
      right += 1;
      if (right > 354) {
        right = 0;
        let first = rightLoopCarousel.splice(4, 1);
        rightLoopCarousel.unshift(...first);  //切割最后一位后 添加到数组第一位 循环
        console.log(123);
      }
      this.setState({
        right,
        rightLoopCarousel
      });
    }, 6);
  };

然后就是页面部分 循环遍历  更新left和right的值

 最后就是根据情况在需要的地方调用定时器 也要记得清除定时器

还可以结合判断鼠标移入移出页面某个元素（监听鼠标事件）_Myx.x的博客-CSDN博客

做鼠标移入移出时执行的操作~

两种方法出来效果差不多

我个人感jio的吧 c3动画的话就是多了差不多快两倍图片 多占点内存空间 但是效果没的说 很nice

js定时器不需要多余图片  就是在有些高帧的电脑 比如mac会看起来一帧一帧的 毕竟是1px1px跑的嘛 还有就是想要性能好点的话还要监听滚动和鼠标事件然后调用 还要清除定时器  防止定时器一直跑 

最后效果差不多啦都  看需求和你自己想咋写喽~

最后效果：

鼠标移入停止轮播（清除定时器） 移出继续轮播（调用定时器）

c3的话自带悬停啦

录不上鼠标哭了 假装一下能看见鼠标~