代码轮播
模块定义
0420根据产品要求修改为“代码轮播”;通过编辑需要轮播的html片段以及背景颜色,实现html片段的轮播效果!
模块模板参数可使用方法
名称 | 值 | 类型 | 描述 |
---|---|---|---|
VM语句 | #foreach($!banner in $!bannerContent) #end | 遍历 | 1、通过遍历的方式获取模块设置里面配置的轮播html。 3、在#foreach和#end语句之间可以对片段轮播的html展示结构进行编辑。 |
轮播图宽度 | $!width | 引用 | 获取配置页面输入的宽度 |
轮播高度 | $!height | 引用 | 获取配置页面输入的高度 |
轮播时间 | $!timer | 引用 | 获取配置页面输入的时间 |
轮播名称 | $!banner.bannerName | 引用 | 获取轮播的名称 |
轮播html | $!banner.content | 引用 | 获取采销自定义的轮播html代码 |
轮播背景色 | $!banner.bgColor | 引用 | 获取每一张轮播的背景色 |
发布状态 | $!banner.publish | 引用 | 获取轮播图的发布状态 |
- 1、根据采销设置的宽度和高度来确定轮播图的大小。2、可自定义向左和向上滑动。3、可自定义图片滑动时间。
模块效果参考
<div class="j-module" module-function="slide" module-param="{imgNode:'.jImgNodeArea .item', slideDirection:'left', timer:'$!timer', subFunction:'moveEffect'}">
#if(!$!height)
<div class="jMessageRemind" style="display:block; position:static;"><br /><br />此模板需要在当前轮播图模块的“设置”中,配置图片的高度和宽度后才能生效!<br /><br /></div>
#else
<div class="jbannerTab">
<ul>
#foreach($!banner in $!bannerContent)
#if($!banner.publish == 1)
<li><span><em>$!banner.bannerName</em></span></li>
#end
#end
</ul>
</div>
<div class="jbannerImg">
<div class="jImgNodeArea">
#foreach($!banner in $!bannerContent)
#if($!banner.publish == 1)
<div class="item" background="$!banner.bgColor" width="$!width" height="$!height">
$!banner.content
</div>
#end
#end
</div>
</div>
#end
</div>
.userjBannerHtml{overflow:hidden;}
.userjBannerHtml .jbannerImg{position:relative; overflow:hidden; height:200px; margin:0 auto;}
.userjBannerHtml .jbannerTab{height:30px; background:#F9F9F9; overflow:hidden; text-align:center;}
.userjBannerHtml .jbannerTab ul{height:25px;border-bottom:1px solid #F4C7D8;padding-left:20px;}
.userjBannerHtml .jbannerTab ul li{float:left;margin-left:5px;cursor:pointer;}
.userjBannerHtml .jbannerTab ul li span{float:left;height:25px;padding-left:30px;}
.userjBannerHtml .jbannerTab ul li em{float:left;height:25px;padding-right:20px;line-height:25px;font-size:16px;color:#E78FB5;font-family:'microsoft yahei';
font-weight:bold;}
.userjBannerHtml .jbannerTab ul span.show{height:26px;background:#f9f9f9 url(//img12.360buyimg.com/cms/g12/M00/0C/09/rBEQYFGoA8EIAAAAAAANKB7coUEAACZyQCvyPYAAA1A624.png) left 1px no-repeat;}
.userjBannerHtml .jbannerTab ul span.show em{height:26px;background:#f9f9f9 url(//img12.360buyimg.com/cms/g12/M00/0C/09/rBEQYFGoA8EIAAAAAAANKB7coUEAACZyQCvyPYAAA1A624.png) right 1px no-repeat;}