`
hyxingzi
  • 浏览: 2297 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

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>更多&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/阿杏
  • js.zip (2.1 KB)
  • 下载次数: 1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics