代码轮播
张世彬 2014-01-13 09:39:54
评论:0 浏览:59908
模块定义

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;}
名称 类型 描述