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(); //初始化

}