[JavaScript知识库]前端学习之轮播图

体验地址：http://150.158.10.192/web

根据 b站大佬的js代码进行更改使用 vue 进行实现，主要用于学习css的动画效果

资源下载地址：https://goatchen.coding.net/public/html-css/HTML-CSS/git/files

<template>
  <div class="body">
    <div class="a">
      <!--动态设置背景图片-->
      <div class="b" :style="{'background-image':'url('+bigImg.backgroundImg+')'}">
      </div>
      <!--for循环-->
      <div class="c">
        <div :class="i === 0 ? 'd dd' : 'd'" v-for="(img,i) in srcs" @mouseover="mouseOver(i)">
          <img :src="require('@/assets/shuffling/' + img)" alt="">
        </div>
      </div>
    </div>


  </div>

</template>

<script>
export default {
  name: 'Shuffling',
  data () {
    return {
      srcs : [
        "1.jpg",
        "2.jpg",
        "3.jpg",
        "4.jpg",
        "5.jpg"
      ],
      bigImg: {
        backgroundImg: ""
      },
      index : 0,   //索引，默认选中数据
      time: null,  //轮播器
      d: [], //所有设置为d的标签
    }
  },
  methods: {
    init() {
      console.log("初始化")
      this.index = 0;
      //获取到d标签
      this.d = document.getElementsByClassName("d");
      //调用轮播器
      this.ts();
    },
    //重置函数，将标签的名称重新设置为d
    repeat() {
      let length = this.d.length;
      for (let i = 0; i < length; i++) {
        this.d[i].className = 'd'
      }
    },

    //选中函数
    selected(i) {
      //重置所有的标签
      this.repeat()
      //根据索引选中的标签设置为d dd
      if (this.d[i]) {
        this.d[i].className = 'd dd'
        console.log("选中图片:" + i)
        //设置图标
        this.setImg(i)
      }
    },
    //鼠标移动到图片上需要停止轮播器
    mouseOver(i) {
      //先设置大图
      this.setImg(i)
      //选中
      this.selected(i)
      //轮播器不为空时清除
      if (this.time) {
        clearInterval(this.time)
      }
      //跳过当前索引
      this.index = i
      this.index++
      //继续设置轮播
      this.ts()
    },
    //轮播函数
    ts() {
      //默认设置轮播函数，传入所有的 d 标签
      this.time = setInterval(() => {
        if (this.index >= 5) {
          this.index = 0;
        }
        //设置选中图片
        this.selected(this.index)
        this.index++
      }, 1500)
    },
    setImg(i) {
      this.bigImg.backgroundImg = require(`@/assets/shuffling/${i+1}.jpg`)
    }
  },
  created() {
    //设置初始的图片信息
    this.bigImg.backgroundImg = require("@/assets/shuffling/1.jpg")
    this.init()
  }
}
</script>

<style scoped>
/*
设置背后body的背景颜色以及长宽高
设置布局模式：flex
内容展示为：居中
使用垂直居中需要设置：flex-wrap:wrap; 换行方式
*/
.body {
  background-color: rgba(206, 182, 182, 0.637);
  display: flex;
  height: 100vh;
  flex-wrap:wrap; /*设置了换行方式：(align-content: center; 垂直居中才有效果)*/
  justify-content: center; /*水平居中*/
  align-content: center;   /*垂直居中*/
}

.a {
  position: relative;
  width: 650px;
  height: 500px;
  display: flex;
  justify-content: space-evenly; /*b和c子元素之间留点空白*/
}

.b {
  width: 400px;
  height: 500px;
  transition: .4s;
  background-size: cover; /*背景图像扩展到足够大，图片的比例不会变，超过容器的部分会被裁掉*/
}

.c {
  width: 200px;
  height: 500px;
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  justify-content: space-between; /*平均分布，之间会有点空白*/
}

.d {
  position: relative;
  width: 200px;
  height: 90px;
  right: 0;
  transition:.5s;
  overflow: hidden; /*图片多余的部分隐藏起来*/
}

.d img {
  position: absolute;
  width: 200px;
  transform: translate(0,-50px); /*可以对元素进行转换，旋转缩放，这里将图片展示上移50px*/
  transition: .5s; /*给所有的img添加一个动画效果，完成动画效果需要的时间 500毫秒*/
  right: 0; /*所有的img标签默认都靠右为0*/
}

/*页面一开始，dd的标签就开始执行动画效果 */
.d.dd {
  opacity: 0;
  right: 250px;
}

/*鼠标移动到 d下面 img标签，会设置透明离右边250px的距离隐藏起来，相当于一个左移的动画效果*/
.d:hover img {
  opacity: 0;
  right: 250px;
}


</style>