<?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 }?>

  因为数据还没有出来不能直接调轮播图,所以先判断数据有没有出来先

而且图片的路径里面不能带中文,空格

avalon.js中使用owl-carousel轮播图的更多相关文章

  1. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  2. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  3. iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  4. JS应用实例2:轮播图

    在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...

  5. 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  6. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  7. 基于js的自适应、多样式轮播图插件(兼容IE8+、FF、chrome等主流浏览器)

    插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传 ...

  8. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  9. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

随机推荐

  1. kvm第五章--虚拟迁移

  2. vue使用技巧:Promise + async + await 解决组件间串行编程问题

    业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...

  3. The version of SOS does not match the version of CLR you are debugging

    分析dump文件时,由于客户生产环境与分析dump文件的环境不一致,常常会出现下面的错误 The version of SOS does not match the version of CLR yo ...

  4. MutationObserver

    一.MutationObserver Config childList: 添加.删除目标节点的子节点时会收到通知(子节点的后代节点添加或删除时不会收到通知) attribute: 修改目标节点属性时会 ...

  5. DBShop后台RCE之曲线救国

    本文最早发布在朋友的公众号 黑客信徒 中,文章是自己写的 不存在抄袭  特此申明 --------------------- 前言 DBShop是一款基于ZendFramework2框架的电子商务系统 ...

  6. 多核cpu关闭、开启核心

    列表 # ls /sys/devices/system/cpu/ 关闭 # echo '0' > /sys/devices/system/cpu/cpu1/online 开启 # echo '1 ...

  7. 实例演示MaxTenuringThreshold参数及阈值动态调整策略

    在上一次[https://www.cnblogs.com/webor2006/p/11031563.html]学习了一个新的JVM对象晋升到老年代的参数“MaxTenuringThreshold”,它 ...

  8. linux网络编程之posix线程(一)

    今天继续学习posix IPC相关的东东,消息队列和共享内存已经学习过,接下来学习线程相关的知识,下面开始: [注意]:创建失败这时会返回错误码,而通常函数创建失败都会返回-1,然后错误码会保存在er ...

  9. 前端处理:elementUI 表格索引代表第几条数据

    分析:表格结合分页 知识点:1.表格的自定义索引(索引以当前行的行号作为参数)number, Function(index)该属性传入数字时,将作为索引的起始值.也可以传入一个方法,它提供当前行的行号 ...

  10. SQL SERVER 语句转换格式函数Cast、Convert

    CAST.CONVERT都可以执行数据类型转换.在大部分情况下,两者执行同样的功能,不同的是CONVERT还提供一些特别的日期格式转换,而CAST没有这个功能. CAST是ANSI兼容的,推荐使用CO ...