Vue练习五十六_07_01_自动轮播广告

Demo在线效果浏览

自动轮播图：

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>