Vue.js如何实现轮播图走马灯
这篇文章主要为大家展示了“Vue.js如何实现轮播图走马灯”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue.js如何实现轮播图走马灯”这篇文章吧。
创新互联公司服务项目包括广信网站建设、广信网站制作、广信网页制作以及广信网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,广信网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到广信省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
这个是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中的样式
{{ item }}
轮播效果图
{{ item }}
以上是“Vue.js如何实现轮播图走马灯”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
新闻标题:Vue.js如何实现轮播图走马灯
网站地址:http://scyanting.com/article/isphpc.html