代码
<template>
<div id="kuang_jia" :style="Style">
<div id="img" ref="divImage">
<img alt="" src="../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg">
<img alt="" src="../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg">
<img alt="" src="../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg">
<img alt="" src="../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg">
<img alt="" src="../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg">
<img alt="" src="../../image/9477156de6d94c49c505a9dfce8e8c17.jpg">
<img alt="" src="../../image/c52be335098658931847fa0ecbcf7d03.jpeg">
<img alt="" src="../../image/d86d80e8573ab91914a6e9ad5217c785.jpg">
<img alt="" src="../../image/e305fca1a381bda8482d8b3296da61f6.jpg">
<img alt="" src="../../image/fa983053c19cf3c7b27491507799e02e.jpeg">
</div>
<div class="zuo_you">
<span class="zuo">
<
</span>
<span class="you">
>
</span>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const divImage = ref(null)
const Style = ref()
onMounted(() => {
let Width = (window.innerWidth - 1000) / 2
if (Width < 0) {
Width = 0
}
Style.value = {
left: Width + 'px'
}
// 计算页面宽度,然后移动到页面中间
// setInterval(() => {
// setTimeout(() => {
// divImage.value.animate({ left: -200 + 'px' }, 1000)
// }, 100)
// }, 1000)
})
</script>
<style lang="scss">
#kuang_jia {
position: absolute;
z-index: 1;
width: 1000px;
}
img {
width: 200px;
height: 300px;
position: relative;
}
#img {
width: 1000px;
height: 300px;
position: absolute;
z-index: 100;
}
.zuo_you {
margin-top: 50%;
font-size: 20px;
color: azure;
position: absolute;
z-index: 999;
}
// 设置顶层显示,并且上下居中
.zuo, .you {
font-size: 50px;
position: relative;
cursor: pointer
}
.zuo {
top: -400px;
}
.you {
top: -400px;
left: 910px;
}
// 扩展:z-index(css属性)
// 用法: z-index: 任意数字
// z-index值大的标签在上显示,值小的标签在下显示
// 如果不生效,去这个网站找办法 https://blog.csdn.net/zhangzhanbin/article/details/120370601
</style>
问题
