1. 在DreamWeaver里插入个层这个层做为滚动区域
设置层参数如下: [IMG]http://webdesign.chinaitlab.com/UploadFiles_8014/200605/20060511161435675.g[/IMG]
设置层编号为:slayer 也就是层ID属性
左和上值是层在页面位置可以根据需要自行设置；这里是100和120象素
宽和高是层大小也根据需要设置； 剪辑是指层显示区域在剪辑以外部分被隐藏我们利用这个显示区域隐藏层右面部分然后控制层移动同时控制这个显示区域来完成我们要滚动区域效果
设置右为显示宽这里为340；下等于高
下面为层代码: < div id=\"slayer\" style=\"position:absolute; top: 120px; left: 100px; clip: rect(0 340 120 0); height: 120px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 670px\" > 我们在可以在层里横着放些图片这里用表格代替而上面设置层大小正好能包容所有图片

2. 下面代码是层滚动代码我们插到层标记< div >下面: 插入时注意layerW值为剪辑(clip)右值这里为340
< script language=\"javascript\" >
< !-- //by hve var layerW=340; //设定显示区域宽
var layerH=parseInt(slayer.style.height); var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //scroll value function movstar(a,time){ (a< 0&&step >-parseInt(slayer.scrollWidth)+layerWa >0&&step< 0) mov(a);
movx=Timeout(\"movstar(\"+a+\",\"+time+\")\",time); }
function movover{ clearTimeout(movx); }
function mov(a){ slayer.style.left = (stepa) + layerL; clipL=0-step; clipR=layerW-step; clipB=layerH; clipT=0; slayer.style.clip=\"rect(\"+clipT+\" \"+clipR+\" \"+clipB+\" \"+clipL+\")\"; } //-- > < /script >


3. 再插入个层放置“控制按钮”
这个层靠在前面层下面用来放置“控制按钮”位置可以根据需要自行调整如下图我们这里用表格色块当作控制按钮如果做两个箭头形状图片会更好
[IMG]http://webdesign.chinaitlab.com/UploadFiles_8014/200605/20060511161435748.g[/IMG] .
在“控制按钮”标记里分别加上下面代码
这里是加在表格标记< td >里如果你用图片做按钮则加在< img >标记里
左按钮: _disibledevent=>右按钮: _disibledevent=>上面代码含义为当鼠标指向按钮开始动作按住则加快速度鼠标离开按钮则停止动作-号为反方向运动


 5. 完成 当鼠标指向“控制按钮”时会向左或向右滚动点住鼠标不放会加快滚动速度
全部代码为:(可以拷贝在BODY区测试)
< div id=\"slayer\" style=\"position:absolute; top: 120px; left: 100px; clip: rect(0 340 120 0); height: 120px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 670px\" > < script language=\"javascript\" > < !-- //by hve var layerW=340; //设定显示区域宽 var layerH=parseInt(slayer.style.height); var layerL=parseInt(slayer.style.left); var layerT=parseInt(slayer.style.top); var step=0; //scroll value function movstar(a,time){ (a< 0&&step >-parseInt(slayer.scrollWidth)+layerWa >0&&step< 0) mov(a); movx=Timeout(\"movstar(\"+a+\",\"+time+\")\",time); } function movover{ clearTimeout(movx); } function mov(a){ slayer.style.left = (stepa) + layerL; clipL=0-step; clipR=layerW-step; clipB=layerH; clipT=0; slayer.style.clip=\"rect(\"+clipT+\" \"+clipR+\" \"+clipB+\" \"+clipL+\")\"; } //-- > < /script > < table cellspacing=\"10\" border=\"0\" cellpadding=\"0\" > < tr bgcolor=\"#FFCC99\" > < td height=\"100\" width=\"100\" > < /td > < td height=\"100\" width=\"100\" > < /td > < td height=\"100\" width=\"100\" > < /td > < td height=\"100\" width=\"100\" > < /td > < td height=\"100\" width=\"100\" > < /td > < td height=\"100\" width=\"100\" > < /td > < /tr > < /table > < /div > < div id=\"Layer1\" style=\"position:absolute; width:344px; height:20px; z-index:1; left: 97px; top: 244px\" > < table width=\"100%\" height=\"100%\" > < tr > < td bgcolor=\"#CCCCCC\" height=\"14\" _disibledevent=>