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

昨晚在调试一个图片滚动的页面,得到一个不错的方法
<SCRIPT src="js/ScrollPic.js" type=text/javascript></SCRIPT>

<!--滚动图片 start-->

<DIV class=rollphotos>
<DIV class=FixTitle>
<H3>运动会回顾</H3><SPAN><A href="http://www.xiambill.com/" target=_blank>更多>></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/阿杏
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值