html滚动效果实现

1. 在css页面添加样式

.fl{ float:left;}
.fr{ float:right;}
.cls{clear:both;}
.width-auto{width:1000px; margin:0 auto;}

.nrog_oo_img{margin-top:75px; margin-left:13px;margin-right:12px;cursor:pointer}

2. 在html中添加代码

在head中添加js文件（该js文件在“我的资源处下载”）

<script type="text/javascript" src="{dede:global.cfg_templeturl/}/handi/js/scrollPic.js"></script>

在body中添加如下代码

<div id="LeftArr1" class="nrog_oo_img fl"><img src="{dede:global.cfg_templeturl/}/handi/img/ship_02.png"/></div>
 <div  id="scrollPic1" class="fl">
  要滚动的内容
</div>
<div id="RightArr1" class="nrog_oo_img fr"><img src="{dede:global.cfg_templeturl/}/handi/img/ship_03.png"/></div>

<div class="cls"></div>

3. 添加的js代码

window.onload = function(){
scrollPic();
}
function scrollPic() {
var scrollPic = new ScrollPic();
scrollPic.scrollContId   = "scrollPic"; //内容容器ID
scrollPic.arrLeftId      = "RightArr";//左箭头ID
scrollPic.arrRightId     = "LeftArr"; //右箭头ID


scrollPic.frameWidth     = 880;//显示框宽度
scrollPic.pageWidth      = 220; //翻页宽度


scrollPic.speed          = 10; //移动速度(单位毫秒，越小越快)
scrollPic.space          = 10; //每次移动像素(单位px，越大越快)
scrollPic.autoPlay       = true; //自动播放
scrollPic.autoPlayTime   = 3; //自动播放间隔时间(秒)

scrollPic.initialize(); //初始化
}