HTML视频能不能做成轮播图,vue.js能做轮播图吗？

vue.js能做轮播图吗？答案是：可以。下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录

(1)先写出整体的框架

根据imgArray这个照片的数组渲染小圆点的数量，为span绑定on为小圆点点亮的状态，照片的显示隐藏通过自定义变量ifshow来显示，nowindex则控制轮播对应的照片。

(2)轮播图的数组，如果是本地的图片，而且不放在static文件下的，请用require圈上路径，否则路径会报错。如果是从后台服务器获取的则不需要。data(){

return{

imgArray: [

require('../../img/item_01.png'),

require('../../img/item_02.png'),

require('../../img/item_03.png'),

require('../../img/item_04.png')

]

}

(3)主要就是通过改变自定义变量nowindex来改变轮播图的状态，要注意滑动的过程是能看见两张图的，所以在goto函数中设置了一个短暂的定时器，让一张显示另一张隐藏，分别加上不同的过度效果。

export default {

props:{

imgArray:{

type:Array,

default:[]

}

data() {

return {

ifshow:true,

nowindex:0,

}

created(){

this.timerun()

computed:{

nextindex(){

if(this.nowindex === this.imgArray.length -1){

return 0

}else{

return this.nowindex + 1

}

methods: {

goto(index){

let that = this;

this.ifshow = false;

setTimeout(function(){

that.ifshow = true;

that.nowindex = index;

},100)

timerun(){

let that = this;

setInterval(function(){

that.goto(that.nextindex)

},2000)

}

到这里，这个简单的轮播图就到此结束了。

更多web前端相关知识，请查阅 HTML中文网！！

HTML视频能不能做成轮播图,vue.js能做轮播图吗？相关推荐

php中实现图片自动轮播,基于vue.js实现图片轮播效果
轮播图效果: html {{sd.title}} js export default { components: { }, ready: function() { var _this=this; va ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
Vue和SuperSlide做轮播效果
使用这个插件做轮播需要的js应该知道,就是vue.js和jquery.SuperSlide.2.1.1.js 下载地址: vue:https://vuejs.org/js/vue.js 这里直接Ctr ...
XMind思维导图教程：如何做思维导图？
思维导图,作为一种有效的图形思维工具越来越受大众欢迎,无论是学生.老师还是上班族,思维导图可以说是必备技能.但是,很多人在接触思维导图时会显得有些焦急,不知道怎么开始去学习它,本文小编就给大家分享下怎 ...
单机按钮来图片轮播_原生js如何实现轮播图效果？
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
如何生成gif动图？手机怎么做gif动图表情包？
我们在手机聊天软件中少不了使用gif表情包.那么,手机如何制作GIF表情包呢?接下来,给大家分享一款gif制作(https://www.gif.cn/)工具-[GIF中文网],上传jpg.Png格式的 ...
网站在线客服系统实时语音视频聊天实战开发，利用peerjs vue.js实现webRTC网页音视频客服系统...
webRTC机制和peerjs库的介绍在其他博客中已经有了很多介绍,这里我直接搬运过来一.webrtc回顾 WebRTC(Web Real-Time Communication)即:网页即时通信. ...
echarts切换飞线图未清空_echarts做飞线图
飞线图 height:100%; } body{ height:100%; margin:0; padding:0; background-color:#2F4056; } const xhr= ne ...

HTML视频能不能做成轮播图,vue.js能做轮播图吗？

HTML视频能不能做成轮播图,vue.js能做轮播图吗？相关推荐

最新文章

热门文章