前端vue实现轮播图（自动轮播）！！！以及轮播图不显示图片问题解决方法！

2024-06-07 17:19| 来源: 网络整理| 查看: 265

话不多说直接上代码

html部分：

css部分：

* { padding: 0; margin: 0; } /* 清除li前面的圆点 */ li { list-style-type: none; } .showImg { position: relative; width: 1540px; height: 290px; margin: 0 auto; overflow: hidden; } /* 轮播图片 */ .showImg img { width: 100%; height: 100%; } /* 箭头图标 */ .iconDiv { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 1px solid #666; border-radius: 15px; background-color: rgba(125, 125, 125, 0.2); line-height: 30px; text-align: center; font-size: 25px; cursor: pointer; } .iconDiv:hover { background-color: white; } .icon-left { left: 10px; } .icon-right { right: 10px; } /* 控制圆点 */ .banner-circle { position: absolute; bottom: 0; width: 100%; height: 20px; } .banner-circle ul { margin: 0 50px; height: 100%; text-align: right; } .banner-circle ul li { display: inline-block; width: 14px; height: 14px; margin: 0 5px; border-radius: 7px; background-color: rgba(125, 125, 125, 0.8); cursor: pointer; } .active { background-color: black !important; }

js部分：

data(){ return { currentIndex :0,//当前所在图片下标 timer:null,//定时轮询 imgArr:[ { id:0, url:require("../../assets/img/1.jpg"), },{ id:1, url:require("../../assets/img/2.jpg"), },{ id:2, url:require("../../assets/img/3.jpg"), },{ id:3, url:require("../../assets/img/4.jpg"), }, ] } }, methods:{ //开启定时器 startInterval(){ // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器 clearInterval(this.timer); this.timer = setInterval(()=>{ this.currentIndex++; if(this.currentIndex > this.imgArr.length-1){ this.currentIndex = 0 } },3000) }, // 点击左右箭头 clickIcon(val){ if(val==='down'){ this.currentIndex++; if(this.currentIndex===this.imgArr.length){ this.currentIndex = 0; } }else{ /* 第一种写法 this.currentIndex--; if(this.currentIndex < 0){ this.currentIndex = this.imgArr.length-1; } */ // 第二种写法 if(this.currentIndex === 0){ this.currentIndex = this.imgArr.length; } this.currentIndex--; } }, // 点击控制圆点 changeImg(index){ this.currentIndex = index }, //鼠标移入移出控制 changeInterval(val){ if(val){ clearInterval(this.timer) }else{ this.startInterval() } } }, //进入页面后启动定时轮询 mounted(){ this.startInterval() } })

轮播i图完成喽！！！

若是不显示图片，将data里的url用require写即可显示图片!!!例如：

url: require("../../assets/img/2.jpg")

【本文地址】

公司简介

联系我们