wpgcms---banner图怎么调用
使用wpgcms调用banner图,首先新建应用为 自定义应用,然后添加对应的字段信息,例如:
具体调用方式:
<ul>
{% set bannerlist = wpg.appdata.getList({app: 'banner', where: 'position=1', limit: 5}) %}
{% for banner in bannerlist %}
{% if banner.url %}
<li><a href="{{ banner.url }}"><img src="{{ wpg.image.get(banner.image).url }}" alt="{{ banner.title }}" title="{{ banner.title }}" /></a></li>
{% else %}
<li><img src="{{ wpg.image.get(banner.image).url }}" alt="{{ banner.title }}" title="{{ banner.title }}" /></li>
{% endif %}
{% endfor %}
</ul>
<div class="shuffling-icon">
<div>
{% for banner in bannerlist %}
<span {% if loop.first %}class="active"{% endif %}></span>
{% endfor %}
</div>
</div>
wpgcms---banner图怎么调用的更多相关文章
- Banner图二三事
前 言 JRedu 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创 ...
- jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)
banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- JQuery实现banner图滚动
前 言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- 原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
- JS 实现banner图的滚动和选择效果
CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...
- 做一个常规的banner图——负边距的使用、banner图的拼法
在这之前,首先要了解如何设置块级元素在块级元素水平居中 方法: 设置子容器为定位元素 水平居中 left:50%:margin-left:-width/2: 垂直居中 top:50%:margin-t ...
- 使用CSS3中的input标签与lable标签组合实现banner图的切换
在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...
随机推荐
- 安全检测:2013 Top 10 List
转自:https://www.owasp.org/index.php/Top_10_2013-Top_10 Risk 2013 Table of Contents 2013 Top 10 List ...
- Android和IOS开发学习路线
图片看上去太小,直接另存为吧 图片来自:http://www.finalshares.com/
- flexbox父盒子align-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mongodb常用操作命令(待续)
1. 开启mongodb命令 >mongo 默认链接到test数据库 2. 显示所有数据库>show dbs 3.切换数据库>use 数据库名 4.查找数据库里某张表的所有成员> ...
- beautifulsoup4 安装教程
下载beautifulsoup, 下载地址:https://www.crummy.com/software/BeautifulSoup/bs4/download/ 下载完成之后,解压到一个文件夹,用c ...
- CentOS6.8_64位手动安装MySQL5.6
1.在CentOS6.8上安装mysql5.6 2.下载编译包 wget https://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.35-linu ...
- Specified VM install not found: type Standard VM, name Java
Specified VM install not found: type Standard VM, name Java 下了一个新项目,使用SpringSource中执行ant脚本时,莫名提示以下错误 ...
- RAC的搭建(三)--Grid的安装
1. 安装cvuqdisk.rpm补丁包 在两个Oracle RAC 所有节点上安装操作系统程序包cvuqdisk.如果没有cvuqdisk,集群验证实用程序就无法发现共享磁盘. 该包在p104045 ...
- lua中的字符串操作(模式匹配)
(一). 模式匹配函数在string库中功能最强大的函数是:string.find(字符串查找)string.gsub(全局字符串替换)string.gfind(全局字符串查找)string.gmat ...
- Xcode - 添加自定义代码提示
在开发过程中我们要学会去模仿苹果的一些用法,这样才能让开发更有效率,更规范. 1.苹果自带的代码片段提示 代码片段就是你在Xcode中敲for然后回车,你会看到 for (<#initializ ...