<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
font-weight: bolder;
font-size: 40px;
}
img {
height: 400px;
width: 600px;
}
body {
background-color: black;
}
.container {
width: 600px;
height: 400px;
margin: 80px auto;
border: 5px solid #eeeeee;
border-radius: 8px;
box-shadow: 10px 10px 400px #0a8a9b;
}
button {
outline-style: none;
width: 50px;
border-radius: 50%;
opacity:0.5;
filter:Alpha(opacity=50);
cursor: pointer;
}
button:hover {
box-shadow: 0 -1px 60px red;
opacity:1;
filter:Alpha(opacity=100);
}
.right-box {
position: relative;
left: 465px;
}
.arrow-move {
margin-top: -250px;
padding: 10px;
}
.index-box {
margin: -150px 0px;
}
.index-box ul li:nth-child(1) {
color: #000;
}
ul li {
color: white;
height: 16px;
width: 16px;
padding: 10px;
}
li:hover {
color: black;
cursor: pointer;
}
</style>
<body>
<div id="app">
<div class="container">
<img :src="images[index]">
<!--
简单实现，不需要通过定义方法
<button @click="index--"> < </button>
<button @click="index++"> > </button>
-->
<div class="arrow-move">
<button class="left-box" @click="backward"> < </button>
<button class="right-box" @click="forward"> > </button>
</div>
<div class="index-box">
<ul>
<li v-for="img in images" :key="img"></li>
</ul>
</div>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data () {
return {
index: 0,
images: [
'./images/img1.jpg',
'./images/img2.jpg',
'./images/img3.jpg',
'./images/img4.jpg',
'./images/img5.jpg'
]
}
},
methods: {
forward () {
let timer = setTimeout(() => {
this.index++;
if (this.index == this.images.length) {
this.index = 0;
}
}, 400);
},
backward () {
let timer = setTimeout(() => {
this.index--;
if (this.index < 0) {
this.index = this.images.length - 1;
}
}, 400);
},
}
})
</script>
</body>
</html>
不完美的地方，页码器追踪（就是页码器和轮播图双向互动），那块没做，逻辑太绕了。
网友评论