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 - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
随机推荐
- 使用VS2012编译和使用C++ STL(STLport)
使用VS2012编译和使用C++ STL(STLport) http://cstriker1407.info/blog/use-vs2012-to-compile-and-use-the-c-stl- ...
- @app.route源码流程分析
@app.route(), 是调用了flask.app.py文件里面的Flask类的route方法,route方法所做的事情和add_url_rule类似,是用来为一个URL注册一个视图函数,但是我们 ...
- dede织梦如何去除网站底部的版权信息
dede织梦如何删除版权powered by?在织梦中,特别是在仿站之中,经常会在首页的底部出现powered by,这是dedecms织梦系统底部自带的官方链接power by等字样,很多新用户想去 ...
- 一种电平转换的方法,使用CPLD
参考应用笔记 http://www.doc88.com/p-0197252336968.html 前言 在原理图设计初期,可能涉及到引脚电平的转换操作,比如主FPGA的某BANK电平为1.5V,但外围 ...
- DBCP连接池原理分析(转载)
DBCP连接池介绍 ----------------------------- 目前 DBCP 有两个版本分别是 1.3 和 1.4. DBCP 1.3 版本需要运行于 JDK 1.4-1.5 ,支持 ...
- 详解Linux磁盘管理与文件系统
磁盘基础 硬盘结构 物理结构 盘片:硬盘有多个盘片,每盘片 2 面. 磁头:每面一个磁头. 数据结构 扇区:磁盘上的每个磁道被等分为若干个弧段,这些弧段便是硬盘的扇区. 硬盘的第一个扇区,叫做引导扇区 ...
- springboot知识点【笔记】
# **一.**Spring Boot 入门 ## 1.Spring Boot 简介 > 简化Spring应用开发的一个框架:>> 整个Spring技术栈的一个大整合:>> ...
- CentOS7下编译安装Python3.7.x【亲测有效】
所有操作都在root用户下操作 下载安装包 编译安装 建立软链接 验证 安装: 更新yum: yum update 安装Python依赖: yum install openssl-devel bzip ...
- 更改和配置本地yum源
查看yum 存放位置 [root@web01 yum.repos.d]# ll /etc/yum.repos.d/ total -rw-r--r--. root root Jun CentOS-Bas ...
- charles 右键菜单
本文参考:charles 右键菜单 在网址/域名上右键 可以获得下面菜单 区域 1 基本操作 :基本的URL复制,文件保存,以及选中文件内搜索 区域 2 重写操作 :重写发送请求(调用接口合适),或者 ...