一、普通方式：
其中，index是关键。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body{
margin: 0;
padding: 0;
}
.photo-player{
width: 456px;
height: 670px;
overflow: hidden;
position: relative;
}
.photo-player-lists{
list-style-type: none;
margin: 0;
padding: 0;
width: 456px;
height: 670px;
}
.photo-player-lists li{
list-style-type: none;
width: 456px;
height: 670px;
}
.photo-player-lists li img{
width: 456px;
height: 670px;
}
.photo-player-button{
position: absolute;
margin: 0;
padding: 0;
bottom: 30px;
left: 198px;
list-style-type: none;
}
.photo-player-button li{
list-style-type: none;
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
float: left;
cursor: pointer;
}
.white{
background: #ffffff;
}
.active{
background: #0000ff;
}
</style>
<title>Title</title>
</head>
<body>
<div id="app">
<my-player :photos="photos"></my-player>
<my-player :photos="photos"></my-player>
<my-player :photos="photos"></my-player>
</div>
<script src="libs/vue.js"></script>
<script>
Vue.component("my-player", {
template: `<div class="photo-player">
<ul class="photo-player-lists">
<li v-for="(value, key) in photos" v-if="key==index"><img :src="value" /></li>
</ul>
<ul class="photo-player-button">
<li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key"></li>
</ul>
</div>`,
props: ["photos"],
data: function(){
return {
index: 0
}
},
methods: {
change(){
let that = this;
let len = this.photos.length;
setInterval(function(){
that.index++;
if(that.index == len){
that.index = 0;
}
}, 1000*3);
}
},
mounted(){
this.change();
}
});
let app = new Vue({
el: "#app",
data: {
photos: ["images/08.jpg", "images/13.jpg", "images/16.jpg"]
}
});
</script>
</body>
</html>
二、单文件组件形式：
PhotoPlayer.vue：
<template>
<div class="photo-player">
<ul class="photo-player-lists">
<li v-for="(value, key) in photos" v-if="key==index" :key="key"><img :src="value" /></li>
</ul>
<ul class="photo-player-button">
<li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key" :key="key"></li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
index: 0
}
},
props: ["photos"],
methods: {
change(){
let that = this;
let len = this.photos.length;
setInterval(function(){
that.index++;
if(that.index == len){
that.index = 0;
}
}, 1000*5);
}
},
mounted(){
this.change();
}
}
</script>
<style scoped>
html, body{
margin: 0;
padding: 0;
}
.photo-player{
width: 456px;
height: 670px;
overflow: hidden;
position: relative;
}
.photo-player-lists{
list-style-type: none;
margin: 0;
padding: 0;
width: 456px;
height: 670px;
}
.photo-player-lists li{
list-style-type: none;
width: 456px;
height: 670px;
}
.photo-player-lists li img{
width: 456px;
height: 670px;
}
.photo-player-button{
position: absolute;
margin: 0;
padding: 0;
bottom: 30px;
left: 198px;
list-style-type: none;
}
.photo-player-button li{
list-style-type: none;
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
float: left;
cursor: pointer;
}
.white{
background: #ffffff;
}
.active{
background: #0000ff;
}
</style>
使用时：
在某个单文件组件中引用PhotoPlayer.vue
<template>
<div>
<PhotoPlayer :photos="photos"></PhotoPlayer>
</div>
</template>
<script>
import PhotoPlayer from './PhotoPlayer'
export default {
data() {
return {
photos: [require("../assets/08.jpg"), require("../assets/13.jpg"), require("../assets/16.jpg")]
}
},
components: {
PhotoPlayer
}
};
</script>
<style scoped=""></style>
注意：
定义了一个数组，数组里面装有图片的路径，使用for循环渲染页面时，图片路径对但是图片不显示。
解决办法：
数组里面图片的路径要写成如下：
image:require('../assets/login.png')
渲染的时候要写：
<img :src="item.image" />