自动轮播图：
1． 5张图
2．每隔3秒图片向上移动一张，到达5张后，从上向下移动
3．5个按钮，切换图片时，按钮外观切换
4．Mouseover按钮，切换至按钮对应的图片
5. 鼠标移至图片上，图片暂停移动
6．鼠标离开图片，图片恢复自动切换
解析：
1． 图片所在ul被设置为position:absolute，即整个ul相对于其容器（div），可以设置其坐标以自由移动（上下方向）
2． 获取整个容器的引用
3． 获取ul（图片列表）的引用（对象）
4． 获取所有图片的引用（数组）
5． 设置循环句柄（timer,playTimer）
6． 动态创建按钮(创建ul，添加class count，
7． 获取按钮（数组）
8． 给按钮添加mouseover事件，将当前按钮index（索引）设置给index，并调用cutover()
9． Cutover（）A清除所有按钮的类B设置index按钮的类为current C调用startMove()并传递需移动的高度（index 乘以 单张图片的高度(offsetHeight)
10. next() bOrder为真，index递增，否则递减；index小于0则设置为0，bOrder为真；index大于等于按钮数，index递减，bOrder为假
11．设置setinterval（next,3000），playtimer
12．给容器（box）添加mouseover和mouseout事件（清除/设置定时器）
13. 辅助函数startMove，接受一个参数（移动距离，Int类）清除/设置定时器timer，调用doMove并传入参数
14 辅助函数doMove()，接受一个参数（移动距离,in翻页）
---------------------------------------------------------------------------------------------
<template>
<div id="box" @mouseover="handleBoxOver" @mouseout="handleBoxOut">
<div class="list">
<ul ref="myUl">
<li ref="myLi"><img src="./assets/lesson7/01.jpg"></li>
<li><img src="./assets/lesson7/02.jpg"></li>
<li><img src="./assets/lesson7/03.jpg"></li>
<li><img src="./assets/lesson7/04.jpg"></li>
<li><img src="./assets/lesson7/05.jpg"></li>
</ul>
</div>
<ul class="count">
<li v-for="(item, index) in btns"
:key="index"
@mouseover="handleBtnOver(index)"
:class="{current:item.isCurrent}"
>
{{ index + 1 }}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
index:0,
bOrder:true,
playTimer:null,
timer:null,
btns:[
{isCurrent:true},
{isCurrent:false},
{isCurrent:false},
{isCurrent:false},
{isCurrent:false}
]
}
},
methods:{
handleBoxOver(){
clearInterval(this.playTimer);
},
handleBoxOut(){
var _this=this;
this.playTimer=setInterval(() => {
_this.next();
}, 3000);
},
handleBtnOver(number){
this.index=number;
this.cutover();
},
cutover(){
for(let i =0;i<this.btns.length;i++) this.btns[i].isCurrent=false;
this.btns[this.index].isCurrent=true;;
this.startMove(-(this.index * this.$refs.myLi.offsetHeight));
},
next(){
this.bOrder ? this.index++ : this.index--;
this.index <=0 && (this.index =0, this.bOrder = true);
this.index >= this.btns.length - 1 && (this.index = this.btns.length -1, this.bOrder = false);
this.cutover()
},
startMove(iTarget){
var _this=this;
clearInterval(this.timer);
this.timer=setInterval(() => {
_this.doMove(iTarget);
}, 20);
},
doMove(iTarget){
var iSpeed=(iTarget-this.$refs.myUl.offsetTop) / 10;
iSpeed=iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
this.$refs.myUl.offsetTop == iTarget ? clearInterval(this.timer) : this.$refs.myUl.style.top = this.$refs.myUl.offsetTop + iSpeed + 'px';
}
},
mounted(){
this.playTimer=setInterval(() => {
this.next();
}, 3000);
}
}
</script>
<style>
body, div,ul, li{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
body{
background: #000;
text-align: center;
font: 12px/20px arial;
}
#box{
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
cursor: pointer;
}
#box .list{
position: relative;
width: 490px;
height: 170px;
overflow: hidden;
}
#box .list ul{
position: absolute;
top:0;
left: 0;
}
#box .list li{
width: 490px;
height: 170px;
overflow: hidden;
}
#box .count{
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li{
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #f90;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 20px;
}
#box .count li.current{
color: #fff;
opacity: 1;
filter: alpha(opacity=100);
font-weight: 700;
background: #f60;
}
</style>