用Vue实现一个简单的轮播效果 及 音乐播放列表
Vue实现简单的轮播效果，用的的一些常用系统指令：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../static/vue.js"></script>
<title>Title</title>
<style>
.turn{
width: 600px;
margin:0 auto;
}
ul{
width: 300px;
margin: 0 auto;
overflow: hidden;
list-style: none;
}
ul li{
float: left;
width: 30px;
height: 30px;
background-color: hotpink;
margin-left: 10px;
line-height: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="turn">
<img :src="currentSrc" @mouseenter="closeTime" @mouseleave="openTime">
<ul>
<a><li v-for = "(item,i) in imgArr" @click="currentChange(item)" >{{ i+1 }}</li></a>
</ul>
<button @click="lastImg">上一张</button>
<button @click="nextImg">下一张</button>
</div>
<script>
let adc =new Vue({
el:"#app",
data:{
currentSrc:"../static/picture/1.png",
imgArr:[
{id:1,src:"../static/picture/1.png"},
{id:2,src:"../static/picture/2.jpg"},
{id:3,src:"../static/picture/3.jpeg"},
{id:4,src:"../static/picture/4.jpg"},
{id:5,src:"../static/picture/5.jpg"},
{id:6,src:"../static/picture/6.jpg"},
],
imgIndex:0,
timer:null,
},
created(){
this.timer= setInterval(this.nextImg,2000)
},
computed:{
reverseStr:{
set:function (newValue) {
},
get:function () {
}
}
},
methods:{
currentChange(item){
this.currentSrc=item.src;
},
lastImg(){
if(this.imgIndex==0){
this.imgIndex=this.imgArr.length
}
this.imgIndex--;
this.currentSrc=this.imgArr[this.imgIndex].src
},
nextImg(){
if(this.imgIndex==this.imgArr.length-1){
this.imgIndex=-1
}
this.imgIndex++;
this.currentSrc=this.imgArr[this.imgIndex].src
},
closeTime(){
clearInterval(this.timer);
},
openTime(){
this.timer=setInterval(this.nextImg,2000);
}
}
})
</script>
</body>
</html>简单的音乐播放列表：
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <script src="../static/vue.js"></script>
7 <title>Title</title>
8 <style>
9 ul{
10 list-style: none;
11 }
12 li{
13 border-bottom: 1px solid gray;
14 }
15 </style>
16 </head>
17 <body>
18
19 <div >
20 <audio :src="currSong" autoplay="" controls="" @ended="nextSong"></audio>
21 <ul>
22 <li v-for="(item,index) in songs">
23 <button @click="play(index)">歌曲：{{ item.song }}</button>
24 <p>作者：{{ item.author }}</p>
25 </li>
26 </ul>
27 <button @click="addSong">添加歌曲</button>
28
29 </div>
30
31 <script>
32 let songList=[
33 {song:"星月神话.mp3",author:"董敏",src:"../static/muscis/星月神话.mp3"},
34 {song:"九张机.mp3",author:"叶清炫",src:"../static/muscis/九张机.mp3"},
35 {song:"红颜旧.mp3",author:"刘涛",src:"../static/muscis/红颜旧.mp3"},
36 {song:"赤血长殿.mp3",author:"王凯",src:"../static/muscis/赤血长殿.mp3"},
37 {song:"风吹麦浪.mp3",author:"李建",src:"../static/muscis/风吹麦浪.mp3"},
38 {song:"恋人心.mp3",author:"魏新雨",src:"../static/muscis/恋人心.mp3"},
39
40 ];
41 let mpc=new Vue({
42 el:"#mplay",
43 data:{
44 songs:songList,
45 //defaultSong:"../static/muscis/星月神话.mp3",
46 indexSong:0,
47 },
48 methods:{
49 play(index){
50 this.indexSong=index
51 },
52 nextSong(){
53 if (indexSong==songs.length-1){
54 this.indexSong=-1;
55 }
56 this.indexSong++;
57 //this.defaultSong=this.songs[this.indexSong].src;
58 },
59 addSong(){
60 this.songs.push({song:"小酒窝.mp3",author:"林俊杰",src:"../static/muscis/小酒窝.mp3"});
61 }
62 },
63 computed:{
64 //生命周期时使用
65 currSong(){
66 console.log(111);
67 return this.songs[this.indexSong].src
68 }
69 }
70
71 })
72 </script>
73 </body>
74 </html>- 上一篇 »css实现图片轮播
- 下一篇 »使用css实现轮播效果