方法描述
1、根据用户设置的宽度和高度来确定轮播图的大小。2、可自定义向左、向上轮播和渐变轮播参数。3、可设置轮播时间。
应用场景
主要应用于html片段轮播，即雷宁轮播模块。此模块和图片轮播功能类似，差异之处在于图片轮播的数据是用户自己上传的图片，html片段轮播每一屏都是一个自定义编辑器，里面的内容全部由用户自定义。
方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="slideHtml" module-param="{参数一:值,参数二:值,...>模板代码</div> 方法调用 支持传入参数
功能参数
轮播效果 subFunction string 其值为：transparentEffect（透明）和moveEffect（移动），当值为moveEffect时，需配合滑动方向slideDirection参数使用。如{subFunction:’moveEffect’,slideDirection:’left’}
轮播方向 slideDirection string 可选值left：向左滑动，top：向上滑动。如{slideDirection:’left’}
轮播时间 timer number 每一张图片轮播的时间（单位：秒）。如{timer:3}
切换事件 eventType string 小缩略图或者数字的切换事件，可选click、mouseenter等。如{eventType:’click’}
当前样式 defaultClass string 给当前显示的图片增加一个样式。如{defaultClass:’show’}
节点参数
大图外层容器 imgArea string 所有大图最外层的div。如：{imgArea:’.jbannerImg’}
大图内层容器 imgNodeArea string 所有大图的滚动层。如：{imgNodeArea:’.jImgNodeArea’}
大图容器 imgNode string 每一个大图外层的dl。如：{imgNode:’.jbannerImg dl’}
小图外层容器 tabArea string 所有缩略小图最外层的div。如：{tabArea:’.jbannerTab’}
小图容器 tabNode string 每一个缩略小图的span。如：{tabNode:’.jbannerTab span’}
图片描述 photoName string 图片描述。如：{photoName:’.jDesc’}
左箭头 arrowLeft string 左箭头。如：{arrowLeft:’.jPreOut’}
右箭头 arrowRight string 右箭头。如：{arrowRight:’.jNextOut’}
左箭头移动效果 arrowLeftOver string 左箭头移动效果。如：{arrowLeftOver:’jPreOver’}
右箭头移动效果 arrowRightOver string 右箭头移动效果。如{arrowRightOver:’jNextOver’}

<div class="j-module" module-function="slideHtml" module-param="{timer:'$!timer',subFunction:'transparentEffect'}">
    #if(!$!height)
    <div class="jMessageRemind" style="display:block; position:static;"><br /><br />此模板需要在当前轮播图模块的“设置”中，配置图片的高度和宽度后才能生效！<br /><br /></div>
    #else
    <div class="jbannerImg">
        <div class="jImgNodeArea">
            <ul>
            #foreach($!banner in $!bannerContent)
               ##if($!banner.publish == 1)
                <li background="$!banner.bgColor" width="$!width" height="$!height">
                    $!{banner.content}
                </li>
               ##end
           #end
           </ul>
        </div> 
    </div>
   <div class="jbannerTab">
        <em class="jPreOut"></em>
        #set($i=1)
        #foreach($!banner in $!bannerContent)
            #if($!banner.publish == 1)
                <span>$i</span>
           #end
           #set($i=$i+1)
       #end        
       <em class="jNextOut"></em>
    </div>
    #end
</div>

.userjBannerHtml{overflow:hidden;}
.userjBannerHtml .jbannerImg{position:relative; overflow:hidden;margin:0 auto;}
.userjBannerHtml .jImgNodeArea{position:relative;}
.userjBannerHtml .jbannerImg li{position:absolute; overflow:hidden;}
.userjBannerHtml .jbannerImg li.show{z-index:1;}
.userjBannerHtml .jbannerTab{height:30px; background:#000; overflow:hidden; text-align:center; font-size:14px; font-weight:bold;}
.userjBannerHtml .jbannerTab span, .userjBannerHtml .jbannerTab em{display:inline-block; *display:inline; zoom:1; vertical-align:middle; margin:5px 3px; cursor:pointer;}
.userjBannerHtml .jbannerTab span{width:20px; height:20px; line-height:20px; text-align:center; background:#FF0000; color:#fff;}
.userjBannerHtml .jbannerTab span.show{background:#fff; color:#333;}
.userjBannerHtml .jbannerTab em{height:20px; width:20px;}
.userjBannerHtml .jPreOut{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -10px no-repeat;}
.userjBannerHtml .jPreOver{background:url(//img12.360buyimg.com/cms/g4/M02/07/01/rBEGFVApq9UIAAAAAAAD9gR0gbYAABYFwP_x8QAAAQO768.png) -10px -50px no-repeat;}
.userjBannerHtml .jNextOut{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -10px no-repeat;}
.userjBannerHtml .jNextOver{background:url(//img13.360buyimg.com/cms/g1/M01/07/01/rBEGD1Apq9EIAAAAAAAECTdZEjAAABYFgP_894AAAQh992.png) -10px -50px no-repeat;}