SF版中图片左向无缝滚动的实现
在SF版中，如何实现图片左向无缝滚动？
一、修改模板：
1、调用系统默认的jquery.pack.js库。
2、在模板中相应位置加入以下JS代码。
3、修改调用图片调用代码
{PE.Label id="通用带图片的信息列表" exhibitStyle="普通式" usePage="false" outputQty="7" titleLength="16" parentId="0" nodeArray="0" modelId="0" joinModelId="0" specialId="0" itemId="0" itemListOrderType="1" disableVirtualLink="false" imageClass="pe_u_thumb" contentClass="pe_u_thumb_title" imageWidth="160" imageHeight="120" forceItemListOrder="true" forceOutputQty="true" class="picList" span="ul" /}
二、修改风格文件：
修改上面模板中调用的风格文件，在风格中加入以下风格
.picList {
DISPLAY: inline; FLOAT: right; WIDTH: 230px
}
.picList LI {
DISPLAY: inline; FLOAT: left; MARGIN: 3px 0px; WIDTH: 49.8%; TEXT-ALIGN: center
}
.picList .pe_u_thumb IMG {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 160px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px solid; HEIGHT: 120px
}
.picList .pe_u_thumb A:hover IMG {
BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid
}
.picScroll {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #f5ffed; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid; HEIGHT: 100%
}
.picScroll .picList {
FLOAT: left; MARGIN: 10px auto; WIDTH: auto; HEIGHT: 105px; TEXT-ALIGN: center
}
.picScroll .picList LI {
DISPLAY: inline; MARGIN: 0px 9px; WIDTH: 131px
}
.picScroll .picList LI IMG {
WIDTH: 160px; HEIGHT: 120px
}
#ZENroll {
OVERFLOW: hidden; WIDTH: 100%
}
#ZENroll .Rollcontent {
MARGIN: 0px auto 10px; OVERFLOW: hidden; WIDTH: 4000px; TEXT-ALIGN: center
}
三、几点说明：
1、调用图片的标签{PE.Label id="通用带图片的信息列表"/}参数，可以根据自己需要进行修改。
2、“ZENroll”是滚动模块id名，需要在JS代码、风格中保持同一名称。
3、只提供左向滚动，自己只能修改滚动延迟时间，也就是滚动速度，第二个参数数字起小，滚动越快。
4、前台图片的大小等效果可以通过修改风格来达到，比如缩约图大小可以修改“.picScroll .picList LI IMG ”来完成。