<?php if($banners){?>
<div class="ms-controller" ms-controller="bannerShow">
<div id="owl-demo" class="page-banner owl-carousel owl-theme">
<a class="item" ms-for="el in @bannerData">
<img ms-attr="{src:el.image}" alt="" style="width:100%;height: 382px;" ms-click="toLink(el.link)">
</a>
</div>
<div class="modal fade" id="showTryPic" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="cursor: pointer;">
<div class="modal-dialog" role="document" style="width: 441px;height:520px;">
<div class="modal-content" style="width: 441px;height: 520px;">
<div class="modal-body" style="width:441px;height:520px;box-sizing: border-box;background-color: #f5f5f9;padding:0;border-radius: 5px;position: relative;text-align: center;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="width:20px;height:20px;display:inline-block;background:url(/image/system/modal-img/cn_img/close.png) no-repeat center center;background-size: contain;position: absolute;right:10px;top:10px;z-index: 1;"
onClick="javascript:;">
<span aria-hidden="true" id="guan"></span>
</button>
<div class="tryscan">
<div id="bannerCode"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// var bannerlist = <?php echo json_encode($banners); ?>;
var qrcodeBanner = new QRCode(document.getElementById("bannerCode"), {
width: 120,
height: 120
});
// setTimeout(function () {
// }, 1000);
</script>
<script>
var banner = avalon.define({
$id: "bannerShow",
bannerData: <?php echo json_encode($banners); ?>,
langModalHeader: function () {
$("#showTryPic").modal("show");
banner.geturl('https://try.fishqc.com')
},
geturl: function (url) {
banner.str = url;
qrcodeBanner.makeCode(banner.str);
},
toLink: function (item) {
if (item == "1") {
banner.langModalHeader()
} else {
window.location.href = item
}
}
})
banner.$watch('onReady', function () {
if (this.bannerData) {
$('#owl-demo').owlCarousel({
items: 1,
loop: true,
lazyLoad: true,
autoplay: true,
autoplayTimeout: 5000,
nav: true,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
});
}
})
</script>
<style type="text/css">
.page-banner a.img {
display: block;
background-size: auto 100%;
}
#bannerCode {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-49%, -48%);
}
</style>
<?php }?>
因为数据还没有出来不能直接调轮播图,所以先判断数据有没有出来先
而且图片的路径里面不能带中文,空格