avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动端的自动轮播和手滑动,其中导航点还在尝试~
<div class="page-banner owl-carousel owl-theme owl-loaded owl-drag" id="slideshow" style="max-width: 37.5rem;" > <div class="item" style="margin:0" id="move6" onClick="javascript:;" > <a class="img" ms-attr="{href:@link1}"> <img ms-attr="{src: @carousel1}"> </a> </div> <div class="item" id="move2" style="margin:0" > <a class="img" ms-attr="{href:@link2}" > <img ms-attr="{src: @carousel2}" > </a> </div> <div class="item" id="move3" style="margin:0" > <a class="img" ms-attr="{href:@link3}"> <img ms-attr="{src: @carousel3}" > </a> </div> <div class="item" id="move4" style="margin:0" > <a class="img" ms-attr="{href:@link4}"> <img ms-attr="{src: @carousel4}" > </a> </div> <div class="item" id="move5" style="margin:0" > <a class="img" ms-attr="{href:@link5}"> <img ms-attr="{src: @carousel5}" > </a> </div> </div>
getlunbo:function(){ $.get('/getBannerInfo', { }, function(res) { if (res.code == '200') { vmi.carousel1=res.data[0].image vmi.carousel2=res.data[1]&&res.data[1].image vmi.carousel3=res.data[2]&&res.data[2].image vmi.carousel4=res.data[3]&&res.data[3].image vmi.carousel5=res.data[4]&&res.data[4].image vmi.link1=res.data[0].link vmi.link2=res.data[1]&&res.data[1].link vmi.link3=res.data[2]&&res.data[2].link vmi.link4=res.data[3]&&res.data[3].link vmi.link5=res.data[4]&&res.data[4].link if(!res.data[1]){ $('.page-banner #move2').remove() } if(!res.data[2]){ $('.page-banner #move3').remove() } if(!res.data[3]){ $('.page-banner #move4').remove() } if(!res.data[4]){ $('.page-banner #move5').remove() } if(res.data.length=='1'){ $('#move6').remove() }else{ $('#move1').remove() vmi.lunbodiaoyong() } }else if(res.code=="204"){ $('#slideshow').remove() $('#move1').remove() } }) }, lunbodiaoyong:function(){ $('#slideshow').owlCarousel({ items: 1, loop:true, lazyLoad:true, autoplay:true, autoplayTimeout:6000, // pagination:true, dots:true, // nav:true, navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'], }); }, }) avalon.filters.getday = function(times) { return Math.round(times / 86400) } vmi.$watch('onReady', function() { vmi.getlunbo() vmi.getcurrentdate() vmi.getduelists() vmi.currentSelect = vmi.setting.currenttry; vmi.tryGoodsList() // vmi.awardPeople() vmi.checkUserAwardStatus() })
因为这里我们要求是图片是五张任意上的,如果只有一张的话就不轮播,这里owl-carousel与ms-for这样的指令是不兼容的~