vue 图片预览幻灯片轮播图（原创）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue左侧弹出幻灯片</title>
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.img-preview-box {
height: 100vh;
position: relative;
perspective: 900px;
background: #000;
}
.img-item {
width: 400px;
height: 260px;
position: absolute;
top: 50%;
transform: translateY(-50%) rotateY(45deg);
opacity: 0.8;
transition: all 0.4s;
cursor: pointer;
z-index: 1;
box-shadow: -5px 5px 20px 5px rgba(0, 0, 0, 0.2);
}
.cur-img {
left: 800px !important;
z-index: 2;
opacity: 1;
transform: translateY(-50%) rotateY(0) scale(1.5);
}
.img-title {
color: #fff;
font-size: 24px;
font-weight: bold;
position: absolute;
bottom: 120px;
left: 950px;
}
.arrow-icon-box {
position: absolute;
right: 100px;
bottom: 60px;
display: flex;
}
.arrow-icon {
color: #999;
border: 1px solid #999;
margin-right: 5px;
padding: 10px 20px;
cursor: pointer;
user-select: none;
}
.arrow-icon:hover {
color: #fff;
background-color: #999;
}
.text {
color: rgb(221, 221, 221);
font-size: 100px;
font-weight: bold;
text-align: center;
opacity: 0.2;
cursor: default;
}
</style>
</head>
<body>
<div id="app">
<div class="img-preview-box">
<img
class="img-item"
:class="{ 'cur-img': curId === item.id }"
:style="{ left: `${100 + 90 * item.id}px` }"
:src="item.url"
v-for="item in list"
:key="item.id"
@click="onPreview(item)"
/>
<div class="img-title">{{ title }}</div>
<div class="arrow-icon-box">
<div class="arrow-icon" @click="onChange('reset')">RESET</div>
<div class="arrow-icon" @click="onChange('last')">< LAST</div>
<div class="arrow-icon" @click="onChange('next')">NEXT ></div>
</div>
<div class="text">PICTURE PREVIEW</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
curId: 0,
title: "",
list: [
{ id: 1, url: "https://images.unsplash.com/photo-1671653687218-4b58c45d2e3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", title: "steep cliff" },
{ id: 2, url: "https://images.unsplash.com/photo-1672266908996-3f0f73c49954?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1529&q=80", title: "sunset glow" },
{ id: 3, url: "https://images.unsplash.com/photo-1670960058964-79063a8ecc91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80", title: "lake" },
],
};
},
methods: {
onPreview({ id, title }) {
this.curId = id;
this.title = title;
},
onChange(direction) {
if (direction === "reset") {
this.curId = 0;
} else if (direction === "last") {
// 上一张
if (this.curId === 1 || this.curId === 0) {
this.curId = 3;
} else {
this.curId -= 1;
}
} else {
// 下一张
if (this.curId === 3 || this.curId === 0) {
this.curId = 1;
} else {
this.curId += 1;
}
}
if (["last", "next"].includes(direction)) {
this.title = this.list.filter(
(item) => item.id === this.curId
).title;
} else {
this.title = "";
}
},
},
});
</script>
</html>
页:
[1]