前端学习之轮播图

时间:2025-03-15 16:32:46
<template> <div class="body"> <div class="a"> <!--动态设置背景图片--> <div class="b" :style="{'background-image':'url('++')'}"> </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 : [ "", "", "", "", "" ], 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/") 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的标签就开始执行动画效果 */ . { opacity: 0; right: 250px; } /*鼠标移动到 d下面 img标签,会设置透明离右边250px的距离隐藏起来,相当于一个左移的动画效果*/ .d:hover img { opacity: 0; right: 250px; } </style>