用vue和react同向无限滑动和淡入淡出缩放效果轮播图的实现

首先用react实现一个同向无限滑动效果：

1.css部分：外层div设置超出隐藏，内层ul 设置足够宽，如果放6张图，700%宽就够了，因为要在末尾多放一张，这样滑动到第7张时也就是显示的第1张图，再关动画无缝切到第1张。内层li 宽100%，设置float。

2.增加class比如animate设置transition: 0.5s 这个自定

3.组件state中设置一个轮播对象的数组，比如pics

4.render()中渲染出来

<ul className={['lunbo', this.state.animate ? 'animate' : ''].join(' ')} style={{ marginLeft: this.state.marginLeft }}>
            {pics.map((it, i) => <li key={i}><img src={it.img} /></li>)}
          </ul>

5.animate控制动画启停，marginLeft控制切换，你也可以用translateX，注意关动画无缝切换的条件：

animater() {
    let ml = this.state.marginLeft
    let len = this.state.pics.length
    if (ml <= -(len - 1) * 600) {        //这里图片区域600px宽
      ml = 0
      this.setState({
        animate: false,         //关闭动画
        marginLeft: ml
      })
    }
     ot = setTimeout(() => {       
      let ml = this.state.marginLeft - 600
      this.setState({
        marginLeft: ml,
        animate: true       
      })
    }, 1000)            
  }

调用：

setInter() { 
    clearInterval(tt);
    tt = setInterval(() => { this.animater() }, 2000); 
    }

然后我们再用vue实现一个缩放淡入淡出轮播图的效果：

效果上：下一张图缩小淡入时上一个图放大淡出，这里我们把切换时间设置4秒，动画时间设置2秒，看起来比较顺滑。 思考如下：

1.首先准备上下叠放的两个img占位元素

2.isChange控制一个图是change样式，一个不是，来实现一个淡入另一个同时淡出

3.两个图层进入下一张的时机不同，动画开始上图层透明度为0，它切换到下一张后2秒淡入同时下图层淡出

4.此时把动画关闭，下图层切换到上图层那张图把change样式去掉，上图层加上change样式

5.然后2秒后开启动画，循环3和4

上代码：

<template>
  <div class="aimg">
    <img
      :src="imgs[lastIndex].src"
      :class="[!isChange ? '' : 'change', isAnimate ? 'animate' : '']"
    />
    <img
      :src="imgs[index].src"
      :class="[isChange ? '' : 'change', isAnimate ? 'animate' : '']"
    />
  </div>
</template>
<script>
var timer;
export default {
  data() {
    return {
      imgs: [
        { src: require("@/assets/img/1.jpg") },
        { src: require("@/assets/img/2.jpg") },
        { src: require("@/assets/img/3.jpg") },
        { src: require("@/assets/img/4.jpg") },
        { src: require("@/assets/img/5.jpg") },
      ],
      index: 0,
      lastIndex: 0,
      isChange: false,
      isAnimate: false,
    };
  },
  mounted() {
    this.imgAnimate();
  },
  methods: {
    imgAnimate() {
      clearInterval(timer);
      timer = setInterval(() => {
        this.isAnimate = true;  //打开动画
        this.index++;     //上图层切换下一张
        if (this.index == this.imgs.length) {
          this.index = 0;
        }
        this.isChange = !this.isChange;  //上图层淡入下图层淡出
        setTimeout(() => {
          this.isAnimate = false;  //关闭动画
          this.lastIndex = this.index;  //下图层切到下一张
          this.isChange = !this.isChange; //上下图层入出互换
        }, 2000);
      }, 4000);
    },
    changeAnimate() {},
  },
};
</script>
<style lang="scss" scoped>
.aimg {
  margin: auto;
  width: 600px;
  position: relative;
  height: 337.5px;
  border: 10px solid #ccc;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .animate {
    transition: 2s;
  }
  .change {
    transform: scale(1.1);
    opacity: 0;
  }
}
</style>