作者：usually111131 | 来源：互联网 | 2022-03-22 16:43
话不多说先上效果图，本文引荐链接https://www.jb51.net/article/129112.htm
这个是html,
话不多说先上效果图，本文引荐链接https://www.jb51.net/article/129112.htm
这个是html,
数据中我用了一个数组来放图片的目录，
data() {
return {
superurl: [
{
url: '',
img: '../../../../static/image/home/pictureA.png',
},
{
url: '',
img: '../../../../static/image/home/pictureB.png',
},
{
url: '',
img: '../../../../static/image/home/pictureC.png',
},
{
url: '',
img: '../../../../static/image/home/pictureD.png',
},
{
url: '',
img: '../../../../static/image/home/showImg1.png',
},
{
url: '',
img: '../../../../static/image/home/showImg2.png',
},
],
calleft:0
}
方法是这样的
created() {
this.move()
},
methods: {
//移动
move() {
this.timer = setInterval(this.starmove, 2500)
},
//开始移动
starmove() {
this.calleft -= 340;
if (this.calleft <-1200) {
this.calleft = 0
}
},
//鼠标悬停时停止移动
stopmove() {
clearInterval(this.timer)
},
//点击按钮左移
zuohua() {
this.calleft -= 340;
if (this.calleft <-1200) {
this.calleft = 0
}
},
//点击按钮右移
youhua() {
this.calleft += 340;
if (this.calleft > 0) {
this.calleft = -1020
}
},
},
因为我们只有静态的图片所以这么可以，但是如果是取数据库中不定数量的图片就不能这么使用了
最后我加上了css样式就可以了
走马灯效果引用的是elementUI中的样式
轮播效果图
以上所述是小编给大家介绍的Vue.js轮播图走马灯详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
京公网安备 11010802041100号