vue-原生轮播图（非连续）

效果

思路

与之前的连续轮播图不同，每个图片按顺序排列成一条，只用改变条的位置，不需要改变图片的顺序。

代码

template

<template>
    <div class="event">
        <div class="swippers">
            <div class="s1">
                <div class="s1_con" :style="con_move1">
                    <img v-for="(item,index) in swipper" :key="index" :src="item[0]" >
                </div>
                <div class="s3">
                    <div class="s3_con" :style="con_move1">
                        <img v-for="(item,index) in swipper" :key="index" :src="item[1]" >
                    </div>
                </div>
            </div>
            <div class="s2">
                <div class="s2_con" :style="con_move2">
                    <img v-for="(item,index) in swipper" :key="index" :src="item[2]" >
                </div>
                <div class="s4">
                    <div class="s4_con" :style="con_move3">
                        <img v-for="(item,index) in swipper" :key="index" :src="item[3]" >
                    </div>
                </div>
                <div class="page">
                    <div v-for="(item,index) in swipper" :key="index" 
                    :style="index == selected_index?'':'border-color: rgba(0,0,0,0)'"
                    v-on:click="onClick(index)"
                    >
                    {{index+1}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

script

export default {
  data() {
    return {
      move1: 0,
      move2: 0,
      move3: 0,
      con_move1: "",
      con_move2: "",
      con_move3: "",
      top: 0,
      swipper: [
        [
          "http://lanyue.ink:8123/images/third1.png",
          "http://lanyue.ink:8123/images/third3.png",
          "http://lanyue.ink:8123/images/third2.png",
          "http://lanyue.ink:8123/images/third4.png"
        ],
        [
          "http://lanyue.ink:8123/images/third1_1.png",
          "http://lanyue.ink:8123/images/third3_3.png",
          "http://lanyue.ink:8123/images/third2_2.png",
          "http://lanyue.ink:8123/images/third4_4.png"
        ],
        [
          "http://lanyue.ink:8123/images/third1.png",
          "http://lanyue.ink:8123/images/third3.png",
          "http://lanyue.ink:8123/images/third2.png",
          "http://lanyue.ink:8123/images/third4.png"
        ]
      ],
      selected_index: 0
    };
  },

  methods: {
    onClick: function(index) {
      var num = this.selected_index - index;
      this.move1 += num * 359;
      this.con_move1 = "left:" + this.move1 + "px;";
      this.move2 += num * 844;
      this.con_move2 = "left:" + this.move2 + "px;";
      this.move3 += num * 198;
      this.con_move3 = "left:" + this.move3 + "px;";
      this.selected_index = index;
    }
  }
};

scss

.event {
  width: 100%;
  height: 1100px;
  top: 697px;
  background: #2e528d;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swippers {
  height: 550px;
  display: flex;
  img {
    height: auto;
  }
  > div {
    overflow: hidden;
    position: relative;
    display: flex;
    font-family: sans-serif;
  }
}

.s1,
.s3,
.s1_con > img,
.s3_con > img {
  width: 359px;
}
.s2,
.s2_con > img {
  width: 844px;
}
.s3,
.s4 {
  height: 170px;
  position: absolute;
  overflow: hidden;
  bottom: 0;
}
.s4,
.s4_con > img {
  width: 198px;
}
.s1_con,
.s2_con,
.s3_con,
.s4_con {
  display: flex;
  position: absolute;
  transition: all 1s;
  left: 0;
}
.page {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 20px;
  div {
    $s: 40px;
    width: $s;
    height: $s;
    line-height: $s;
    text-align: center;
    margin: 10px;
    border-radius: 100%;
    border: 3px solid #fff;
    color: #fff;
    transition: all 0.8s;
  }
}