vue做一个简单的动态轮播图

首先先看样式

• 这个轮播图是根据数据库里 的图片数量进行动态变化的
• 只有一张图不轮播
• 大于1张图才会动起来

html

<div class="banner">
  <ul class="con" :style="classobj">
     <li v-for="(item, index ) in banList" :key="index">
       <a :href="item.serviceContent">
         <img :src="item.imgUrl" alt="">
       </a>
     </li>
   </ul>
   <ul class="btn">
     <li v-for="(item, index) in banList" :key="index" @click="now(index)"></li>
   </ul>
   <div class="rb" @click="rb">></div>
   <div class="lb" @click="lb"><</div>
 </div>

javascript

export default {
 data () {
    return {
      banList: [], // banner列表
	  num: 0, // 当前图片位置
    }
  },
  methods: {
    // 动态获取图片信息, 发送请求获取数据库数据
    async getBanner () {
      let res = await axios.getTest('xxx')
      if (res.code == 0) {
        this.banList = res.data.resultList
        // 判断一下, 如果只有一张图片就不自动播放轮播
        if (this.banList.length > 1) {
          this.startMove()
        }
      }
    },
    // 点击小圆点
    now(index){
			this.num=index;
			console.log(this.num)
		},
    // 右移
		rb(){
			// 判断是否到最后一张图
			if(this.num == this.banList.length -1){
				this.num=0;
			}else{
				this.num++;
			}						
		},
    // 左移
		lb(){
			// 判断是否到第一张图
			if(this.num == 0){
				this.num = this.banList.length -1;
			}else{
				this.num --;
			}												
		},
    // 定时轮播
    startMove () {
      setInterval(() => {
        this.rb()
      }, 3000)
    }
  },
  created () {
    this.getBanner()
  },
  computed: {
  // 根据数据个数 动态计算 轮播的父盒子宽度
    classobj: function(){
		return { marginLeft: this.num * -7.5 + 'rem', width: this.banList.length * 7.5 + 'rem' }
		}	
  }
}
</script>

css

• 这里我是用的是less

	ul , li {
		list-style: none;
	}
	.banner{
		width: 7.5rem;
    	height: 2.85rem;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	.con{
		width: 37.5rem;
		height: 2.85rem;
    	transition: 1s all;
	}
	.con li{
		width: 7.5rem;
    	height: 2.85rem;
		float: left;
    	overflow: hidden;
    	padding: 0.2rem 0.25rem;
		line-height: 2.62rem;
	}
	.btn{
		position: absolute;
		bottom: 0.3rem;
		left: 50%;
    	transform: translate(-50%, 0);
	}
	.btn li{
		width: 0.2rem;
		height: 0.2rem;
		border-radius: 50%;
		background: #fff;
		float: left;
		margin: 0.1rem;
		text-align: center;
	}
	.rb,.lb{
    	display: block;// 不需要左右箭头可以设为 none
		position: absolute;
		font-size: 30px;
		color: orange;
		top: 50%;
    	transform: translate(0 , -50%);
		margin-top: -20px;
	}
	.rb{
		right: 0;
	}

• 一个简单的动态轮播图, 各位有没有学会呢! 觉得有用就点个赞吧