基于vue.js实现图片轮播效果

轮播图效果：

1.html

template div class=' shuffling ' div class=' fouce fl ' div class=' focus ' ul class=' show img ' template v-for=' SD in shuffling gdata ' Li v-if=' shuffling GID==$ index ' v-: mouse over=' showPreNext ' v-: mouse out=' hiddenPreNext ' a target=' _ blank ' title=' { { SD。title } } ' class=' img ' href=' { { SD。href } } }

脚本导出默认{ components : }，ready : function(){ var _ this=this；var timer=setInterval(function(){ if(_)this。shuffflingid=0 _ this。shuffflingid _ this。shuffflingdata。length-1){ _ this。shuffling id=parsent(_ this。shuffling id)1；} else if(_ this。shuffflingid==_ this。shuffflingdata。length-1){ _ this。shuffling id=0；} }，5000) }，方法： { bulletfunone : function(){ this。洗牌GID=0；}，bulletfuntwo :函数(){ this。洗牌GID=1；}，bulletfuntrie : FuncTion(){ this。洗牌GID=2；}，showprenext :函数(){ this .PreNext=true}，hiddenprenext :函数(){ this .PreNext=false}，prefun : function(){ var _ this=this；if(_ this。shuffflingid 0 _ this。shuffflingid _ this。shuffflingdata。长度){ _ this。shuffling id=parsent(_ this。shuffling id)-1；} }，next fun : function(){ var _ this=this；if(_ this。shuffflingid=0 _ this。shuffflingid _ this。shuffflingdata。length-1){ _ this。shuffling id=parsent(_ this。shuffling id)1；} } }，data(){ return { shufflingdata : [{ title : '喵来个米，href:'1 '，URL : '/XXX/xx/src/img/1。png ' }，{ title: '豆豆，href:'2 '，URL : '/XXX/xx/src/img/2。png ' }，{ title: '猫咪咪，href:'3 '，URL : '/XXX/xx/src/img/3。jpg ' }]，shufflingId:0，PreNext:false，} } } } }脚本3。半铸钢钢性铸铁(Cast Semi-Steel)。fouce {位置：相对；左侧：380像素飞越：隐藏；高度： 570像素；宽度： 1100像素；}.fl { float:左侧；}.焦点{ overflow:隐藏；}.fouce ul { position: absolute}。fouce ul li {左侧浮动：}.fouce ul li a.img { display: block区块块；高度： 520像素；}.show img { width :1440 pxleft :-0px；}.showimg img { display:块；宽度宽度：1100像素高度：520 px}.福兹项目符号分页{位置：绝对值；bottom: 50px}。fouce ul li h3 {高度： 40px线高： 40px背景色： # eded文本对齐：中心；font-size : 25px宽度： 1100像素；}.项目符号-分页{宽度： 100%；文本对齐：中心；衬垫-顶部： 16pxclear:两者；飞越：隐藏；}.项目符号{ display : inline-block；背景# fff宽度： 12px高度： 12px border-半径： 6px-web套件-边框-半径： 6px右边距： 5pxopa city 3360 0.8-WebKit-transit :不透明度0.8s线性；-moz-transit :不透明度0.8s线性；-ms-transit :不透明度0.8s线性；-o-transit :不透明度0.8s线性；过渡：不透明度0.8s线性；} .子弹。活跃{后台： # 007 CDB；opa城市3360 1；光标：指针；}.preNext { display:块；宽度： 31px高度： 41px绝对位置：top: 200pxcursor:指针；}.pre { background : URL('/XXX/xx/src/img/news _ arr _ r . png ')不重复右中；}.下一个{背景： URL('/XXX/xx/src/img/news _ arr _ r . png ')不重复左中；right : 0px } * { padd : 0；保证金： 0；列表样式：无；} a { text-decoration : none}本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。