avalon.js中使用owl-carousel轮播图
<?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轮播图的更多相关文章
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
最终效果图: 一.轮播图中图片自适应宽高: <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...
- JS应用实例2:轮播图
在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 基于js的自适应、多样式轮播图插件(兼容IE8+、FF、chrome等主流浏览器)
插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传 ...
- JS原生带小白点轮播图
咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...
- Bootstrap插件-carousel(轮播图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
随机推荐
- kvm第五章--虚拟迁移
- vue使用技巧:Promise + async + await 解决组件间串行编程问题
业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...
- 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 ...
- MutationObserver
一.MutationObserver Config childList: 添加.删除目标节点的子节点时会收到通知(子节点的后代节点添加或删除时不会收到通知) attribute: 修改目标节点属性时会 ...
- DBShop后台RCE之曲线救国
本文最早发布在朋友的公众号 黑客信徒 中,文章是自己写的 不存在抄袭 特此申明 --------------------- 前言 DBShop是一款基于ZendFramework2框架的电子商务系统 ...
- 多核cpu关闭、开启核心
列表 # ls /sys/devices/system/cpu/ 关闭 # echo '0' > /sys/devices/system/cpu/cpu1/online 开启 # echo '1 ...
- 实例演示MaxTenuringThreshold参数及阈值动态调整策略
在上一次[https://www.cnblogs.com/webor2006/p/11031563.html]学习了一个新的JVM对象晋升到老年代的参数“MaxTenuringThreshold”,它 ...
- linux网络编程之posix线程(一)
今天继续学习posix IPC相关的东东,消息队列和共享内存已经学习过,接下来学习线程相关的知识,下面开始: [注意]:创建失败这时会返回错误码,而通常函数创建失败都会返回-1,然后错误码会保存在er ...
- 前端处理:elementUI 表格索引代表第几条数据
分析:表格结合分页 知识点:1.表格的自定义索引(索引以当前行的行号作为参数)number, Function(index)该属性传入数字时,将作为索引的起始值.也可以传入一个方法,它提供当前行的行号 ...
- SQL SERVER 语句转换格式函数Cast、Convert
CAST.CONVERT都可以执行数据类型转换.在大部分情况下,两者执行同样的功能,不同的是CONVERT还提供一些特别的日期格式转换,而CAST没有这个功能. CAST是ANSI兼容的,推荐使用CO ...