JS动态可控制左右滚动的图片代码

这几天在整理一个系统发现了这个方法,贴出来一块儿学习学习。
<!--滚动图片 start-->

<DIV class=rollphotos>
<DIV class=FixTitle>
<H3>运动会回顾</H3><SPAN><A href="http://www.xiambill.com/" target=_blank>更多&gt;&gt;</A></SPAN></DIV>
<DIV class=blk_29>
<DIV class=LeftBotton id=LeftArr></DIV>
<DIV class=Cont id=ISL_Cont_1>
<!-- 图片列表 begin -->
<DIV class=box><A class=imgBorder href="http://www.wuhbill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/1.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>运动会火炬传递</A></P></DIV>
<DIV class=box><A class=imgBorder href="http://www.shenzbill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/2.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>运动会精彩瞬间</A></P></DIV>
<DIV class=box><A class=imgBorder href="http://www.xiambill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/3.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>卡通玩偶组成会徽</A></P></DIV>
<DIV class=box><A class=imgBorder href="http://www.wuhbill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/4.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>运动会焰火表演</A></P></DIV>
<DIV class=box><A class=imgBorder href="http://www.shenzbill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/5.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>中国表明团入场</A></P></DIV>
<DIV class=box><A class=imgBorder href="http://www.shenzbill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/6.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>各表明团入场</A></P></DIV>
<DIV class=box><A class=imgBorder href="http://www.wuhbill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/7.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>运动会暖场表演</A></P></DIV>
<DIV class=box><A class=imgBorder href="http://www.xiambill.com/" target=_blank><IMG height=84 alt="Hy-Apricot" src="images/8.jpg" width=100
border=0></A>
<P><A href="http://www.xiambill.com/"
target=_blank>运动会即将举行</A></P></DIV>
<!-- 图片列表 end --></DIV>

<DIV class=RightBotton id=RightArr></DIV></DIV>


<SCRIPT language=javascript type=text/javascript>
        
        var scrollPic_02 = new ScrollPic();
        scrollPic_02.scrollContId   = "ISL_Cont_1"; //内容容器ID
        scrollPic_02.arrLeftId      = "LeftArr";//左箭头ID
        scrollPic_02.arrRightId     = "RightArr"; //右箭头ID

        scrollPic_02.frameWidth     = 900;//显示框宽度
        scrollPic_02.pageWidth      = 100; //翻页宽度

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

        scrollPic_02.initialize(); //初始化
                            
</SCRIPT>
</DIV>

<!--滚动图片 end-->
by:hy-apricot/阿杏
相关文章
相关标签/搜索