使用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图怎么调用的更多相关文章

  1. Banner图二三事

      前  言 JRedu 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创 ...

  2. jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  3. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  4. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  5. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  6. 原生态JS实现banner图的常用所有功能

    虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...

  7. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

  8. 做一个常规的banner图——负边距的使用、banner图的拼法

    在这之前,首先要了解如何设置块级元素在块级元素水平居中 方法: 设置子容器为定位元素 水平居中 left:50%:margin-left:-width/2: 垂直居中 top:50%:margin-t ...

  9. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

随机推荐

  1. 安全检测:2013 Top 10 List

    转自:https://www.owasp.org/index.php/Top_10_2013-Top_10   Risk 2013 Table of Contents 2013 Top 10 List ...

  2. Android和IOS开发学习路线

    图片看上去太小,直接另存为吧 图片来自:http://www.finalshares.com/

  3. flexbox父盒子align-content属性

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

  4. mongodb常用操作命令(待续)

    1. 开启mongodb命令 >mongo 默认链接到test数据库 2. 显示所有数据库>show dbs 3.切换数据库>use 数据库名 4.查找数据库里某张表的所有成员> ...

  5. beautifulsoup4 安装教程

    下载beautifulsoup, 下载地址:https://www.crummy.com/software/BeautifulSoup/bs4/download/ 下载完成之后,解压到一个文件夹,用c ...

  6. 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 ...

  7. Specified VM install not found: type Standard VM, name Java

    Specified VM install not found: type Standard VM, name Java 下了一个新项目,使用SpringSource中执行ant脚本时,莫名提示以下错误 ...

  8. RAC的搭建(三)--Grid的安装

    1. 安装cvuqdisk.rpm补丁包 在两个Oracle RAC 所有节点上安装操作系统程序包cvuqdisk.如果没有cvuqdisk,集群验证实用程序就无法发现共享磁盘. 该包在p104045 ...

  9. lua中的字符串操作(模式匹配)

    (一). 模式匹配函数在string库中功能最强大的函数是:string.find(字符串查找)string.gsub(全局字符串替换)string.gfind(全局字符串查找)string.gmat ...

  10. Xcode - 添加自定义代码提示

    在开发过程中我们要学会去模仿苹果的一些用法,这样才能让开发更有效率,更规范. 1.苹果自带的代码片段提示 代码片段就是你在Xcode中敲for然后回车,你会看到 for (<#initializ ...