用vue实现一个轮播图

一、首先我们定个三个变量

轮播图数组、当前位置、定时器对象

代码语言：javascript复制

  data() {
    return {
      data: [
        '../../image/home/banner.jpeg',
        '../../image/home/banner.jpeg',
        '../../image/home/banner.jpeg'
      ],
      currentIndex: 0,
      timer: null,
      islogin: getToken()
    }
  },

二、基本样式

我们定义一个大盒子来包裹，然后子元素一个容纳图片的盒子，一个容纳切换样式的盒子

代码语言：javascript复制

<template>
  <div class="banner">         
    <div class="item">         
      <img :src="data[currentIndex]">                                                                                                                                                                     
    </div>
    <div class="page" v-if="this.data.length > 1">
      <ul>
        <li @click="gotoPage(prevIndex)">&lt;</li>
        <li v-for="(item,index) in data" @click="gotoPage(index)" :class="{'current':currentIndex == index}">  {{index 1}}</li>
        <li @click="gotoPage(nextIndex)">&gt;</li>
      </ul>                    
    </div>
  </div>
</template> 

目前展示的大概是乱的样子，然后我们来优化样式

三、修复样式

底部进行遮罩样式，分页位于右侧，鼠标滑动显示可点击效果，字体颜色

代码语言：javascript复制

<style lang="scss" scoped>
.banner {
  position: relative;          
  margin-bottom: 0.7rem;       
    .current {                 
      color: #ff6700;          
    }
    .page {                    
      background: rgba(0,0,0,.5);     
      position: absolute;
      right: 0;                
      bottom: 0;               
      width: 100%;             
        ul{                    
          float: right;        
        }
    }
    ul li {                    
      list-style: none;        
      float: left;             
      width: 30px;             
      height: 40px;            
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      color: rgba(255,255,255,.8);    
      font-size: 14px;
    }
}
.banner img {
  width: 100%;
  max-height: 680px;
}
</style> 

样式处理完，这下就好看多了吧，作为一个后端，对样式并不敏感，所以我喜欢写了基本样式后，用浏览器调试模式进行优化

四、效果实现

这时候我们来处理一些点击事件

4.1用计算属性，获取上页下页的数据

代码语言：javascript复制

  computed: {                  
    prevIndex() {              
      if (this.currentIndex === 0) {
        return this.data.length - 1
      } else {                 
        return this.currentIndex - 1
      }
    },
    nextIndex() {              
      if (this.currentIndex === this.data.length - 1) {
        return 0               
      } else {                 
        return this.currentIndex   1
      }
    }
  },

4.2实现点击具体页码的方法

代码语言：javascript复制

    gotoPage(index) {
      this.currentIndex = index                                                                                                                                                                           
    }

4.3实现定时器方法

代码语言：javascript复制

    runInv() {                 
      this.timer = setInterval(() => {
        this.gotoPage(this.nextIndex)
      }, 3000)
    },

页面加载的时候需要调用一次

至于鼠标移动上去后，是否定制定时器，个人感觉完全没必要

定时器 分页 后端

0 人点赞