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

我不是女神ヾ 2023-06-07 15:27 19阅读 0赞

### 首先先看样式 ###

![在这里插入图片描述][20191015163056941.png]

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

### html ###

### 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;
    	}

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

[20191015163056941.png]: /images/20230601/5964804d80c94f9f82e59687fcaec8d9.png