2024年9月9日发(作者：)

图片左向无缝滚动的实现

一、修改模板：

1、调用系统默认的库。

2、在模板中相应位置加入以下JS代码。

3、修改调用图片调用代码

二、修改风格文件：

修改上面模板中调用的风格文件，在风格中加入以下风格

.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

}

如果仅仅是需要调用图片频道的图片信息，可以修改第3点里面的标签调用

{ id="通用带图片的信息列表" bindStyle="普通式"

outputQty="7" titleLength="40" nodes="2" usePage="false"

imageClass="pe_u_thumb" contentClass="pe_u_thumb_title" imageWidth="160"

imageHeight="120" forceItemListOrder="true" forceOutputQty="true"

class="picList" span="ul" /}

三、几点说明：

1、调用图片的标签{ id="通用带图片的信息列表"/}参数，可以根据自己需要

进行修改。

2、“ZENroll”是滚动模块id名，需要在JS代码、风格中保持同一名称。

3、只提供左向滚动，自己只能修改滚动延迟时间，也就是滚动速度，第二个参数数字

起小，滚动越快。

4、前台图片的大小等效果可以通过修改风格来达到，比如缩约图大小可以修改

“.picScroll .picList LI IMG ”来完成。

SF4.7默认模板使用此办法，会出现双层，此时修改css最后一句代码即可

#ZENroll .Rollcontent {

MARGIN: 0px auto 10px; OVERFLOW: hidden; WIDTH: 4000px; TEXT-ALIGN:

center; HEIGHT: 220px

}