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 == '') {
vmi.carousel1=res.data[].image
vmi.carousel2=res.data[]&&res.data[].image
vmi.carousel3=res.data[]&&res.data[].image
vmi.carousel4=res.data[]&&res.data[].image
vmi.carousel5=res.data[]&&res.data[].image
vmi.link1=res.data[].link
vmi.link2=res.data[]&&res.data[].link
vmi.link3=res.data[]&&res.data[].link
vmi.link4=res.data[]&&res.data[].link
vmi.link5=res.data[]&&res.data[].link
if(!res.data[]){
$('.page-banner #move2').remove()
}
if(!res.data[]){
$('.page-banner #move3').remove()
}
if(!res.data[]){
$('.page-banner #move4').remove()
}
if(!res.data[]){
$('.page-banner #move5').remove()
}
if(res.data.length==''){
$('#move6').remove()
}else{
$('#move1').remove()
vmi.lunbodiaoyong()
}
}else if(res.code==""){
$('#slideshow').remove()
$('#move1').remove()
}
})
},
lunbodiaoyong:function(){
$('#slideshow').owlCarousel({
items: ,
loop:true,
lazyLoad:true,
autoplay:true,
autoplayTimeout:,
// 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 / )
}
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这样的指令是不兼容的~