做一个轮播图,要实现鼠标放在图片上面会显示图片信息
<template>
<!-- 此页面为图片轮播页面 -->
<div id="kuang_jia">
<div id="img">
<div ref="divImage" @mouseenter="mouseEenter" @mouseleave="mouseLeave">
<!-- 标签中的ref的作用和js中的document.getElementById作用一样.都是获取标签属性,此div用于控制超出隐藏 -->
<table v-for="(item, index) in miaoshuList" id="miaoshu" :key="index">
<tr>
<td>{{ item.mingcheng }}</td>
</tr>
<tr>
<td>{{ item.shichang }}</td>
</tr>
<tr>
<td>{{ item.leixing }}</td>
</tr>
<tr>
<td>{{ item.daoyan }}</td>
</tr>
</table>
<img
v-for="(item, index) in imgList.array"
:key="index"
alt=""
class="bigImg"
v-bind:src="item"
/>
<!-- 设置图片数组循环,依次获取所有图片 -->
</div>
</div>
<span class="zuo" @click="zuo"> < </span>
<span class="you" @click="you"> > </span>
</div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import one from '../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg'
import tow from '../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg'
import three from '../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg'
import four from '../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg'
import five from '../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg'
import six from '../../image/9477156de6d94c49c505a9dfce8e8c17.jpg'
import seven from '../../image/c52be335098658931847fa0ecbcf7d03.jpeg'
import eight from '../../image/d86d80e8573ab91914a6e9ad5217c785.jpg'
import nine from '../../image/e305fca1a381bda8482d8b3296da61f6.jpg'
import ten from '../../image/fa983053c19cf3c7b27491507799e02e.jpeg'
// 导入所有图片
const imgList = reactive({ array: [] })
imgList.array = [one, tow, three, four, five, six, seven, eight, nine, ten]
// 将图片放入数组,以供循环,由于图片是直接导入的,所以不用放在onMounted()方法内
const divImage = ref()
// 获取标签属性
const countChu = ref()
// 设置滚动初始值
const width = ref()
let xunHuan1
// 设置轮播变量,方便调用
const miaoshuList = ref()
// 设置描述数组
watch(countChu, () => {
if (countChu.value > 5) {
clearTimeout(xunHuan1)
// 当页面预览的最后一张图片为图片库中的最后一张时,则停止滚动
} else {
xunHuan1 = setTimeout(() => {
width.value = (-10) * countChu.value
divImage.value.style.transform = 'translateX(' + width.value + '%)'
// 设置每次轮播的距离百分比
divImage.value.style.transitionDuration = '1s'
// 设置每次轮播过程的时间
countChu.value++
// 设置次数的增长
}, 3000)
// 设置滚动,由于水平原因无法实现轮播,故设置为当页面最右边的图片为最后一张时,停止滚动
}
})
// 设置监听事件,当预览的图片不是最后一张时,则继续滚动
const zuo = () => {
clearTimeout(xunHuan1)
if (countChu.value <= 1) {
return
}
width.value += 10
countChu.value--
divImage.value.style.transform = 'translateX(' + width.value + '%)'
setTimeout(xunHuan1)
}
// 设置左侧箭头点击事件
const you = () => {
clearTimeout(xunHuan1)
if (countChu.value >= 5) {
return
}
width.value -= 10
countChu.value++
divImage.value.style.transform = 'translateX(' + width.value + '%)'
setTimeout(xunHuan1)
}
// 设置右侧箭头点击事件
onMounted(() => {
countChu.value = 1
miaoshuList.value = [
{
mingcheng: '凤皇传',
shichang: '120分钟',
leixing: '喜剧 / 古装',
daoyan: '梁文弋'
},
{
mingcheng: '风暴',
shichang: '104分钟',
leixing: '动作 犯罪 警匪',
daoyan: '袁锦麟'
},
{
mingcheng: '废柴特工',
shichang: '96分钟',
leixing: '喜剧 / 动作',
daoyan: '玛·诺里扎德'
},
{
mingcheng: '罪之声 ',
shichang: '142分钟',
leixing: '悬疑 / 犯罪',
daoyan: '土井裕泰'
},
{
mingcheng: '小妇人',
shichang: '135分钟',
leixing: '剧情 / 爱情',
daoyan: '格蕾塔·葛韦格'
},
{
mingcheng: '无人区',
shichang: '117分钟',
leixing: '剧情 / 犯罪 / 西部',
daoyan: '宁浩'
},
{
mingcheng: '妈妈!',
shichang: '109分钟',
leixing: '剧情',
daoyan: '杨荔钠'
},
{
mingcheng: '线人',
shichang: '113分钟',
leixing: '剧情 / 动作 / 惊悚',
daoyan: '林超贤'
},
{
mingcheng: '狙击手',
shichang: '96分钟',
leixing: '剧情 / 历史 / 战争',
daoyan: '张艺谋 / 张末'
},
{
mingcheng: '绝地逃亡',
shichang: '111分钟',
leixing: '喜剧 / 动作',
daoyan: '雷尼·哈林'
}
]
})
// 页面载入时赋值
console.log(miaoshuList)
const mouseEenter = () => {
clearTimeout(xunHuan1)
}
const mouseLeave = () => {
setTimeout(xunHuan1)
}
</script>
<style scoped>
#kuang_jia {
position: relative;
width: 100%;
margin: 0 auto;
}
img {
width: 200px;
height: 300px;
margin: 20px;
border: azure 3px solid;
z-index: 10;
}
#miaoshu {
width: 200px;
height: 300px;
margin: 23px;
float: left;
position: relative;
background-color: #42b983;
text-align: center;
top: -100px;
/*display: none;*/
z-index: 1;
}
#img {
width: 1230px;
height: 340px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
img:hover {
transform: scale(1.05)
}
/* 设置鼠标移到图片上的效果 */
#img div {
width: 2460px;
height: 340px;
position: relative;
background-color: bisque;
}
.zuo, .you {
font-size: 50px;
position: relative;
cursor: pointer;
display: block;
width: 50px;
height: 50px;
color: aqua;
}
.zuo {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
}
.you {
position: absolute !important;
top: 50%;
right: 0;
transform: translateY(-50%);
}
/* 扩展:!important(Css属性) */
/* 用法: https://www.runoob.com/css/css-important.html */
</style>
vue生命周期共分为四个阶段
一：实例创建
二：DOM渲染
三：数据更新
四：销毁实例
共有八个基本钩子函数:
beforeCreate：在vue实例化之前调用，在这个函数中无法获取数据，同时页面的真实dom节点也没有渲染出来为null
在此阶段可以做的事情：加loading事件
created：在vue实例化之后调用，可以获取到数据页面真实dom
在此阶段可以做的事情：解决loading，请求ajax数据，为mounted渲染做准备
beforeMount：挂载到DOM树之前调用（代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来）可以做ajax与初始化事件的绑定操作
在此阶段可以做的事情：可以做ajax与初始化事件的绑定操作
mounted：挂载到DOM树之后调用，真实的dom也已经渲染出来了
在此阶段可以做的事情：启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeUpdate：数据更新之前调用
updated：数据更新之后调用
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy：vue实例销毁前执行，此时仍然可以使用子组件的实例、methods、watch
在此阶段可以做的事情： 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
destroyed：vue实例销毁后执行，无法再使用子组件的实例，methods、watch
在此阶段可以做的事情： 组件销毁时进行提示
在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子activated 与 deactivated。
activated ：activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。
activated调用时机：
第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用：
deactivated：组件被停用(离开路由)时调用
注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。