昨晚在调试一个图片滚动的页面,得到一个不错的方法
<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/阿杏
分享到:
相关推荐
JS动态可控制左右滚动的图片代码
JS动态可控制左右滚动的图片代码(支持自动播放)
在这个栏目中,新浪采用了两个滚动动画,点击左右箭头,图片可以一张张切换,切换得一点都不“唐突”,这就是jquery的功能了。像这样的动画,很常见,之前我在腾讯的女性频道上也做过此类的滚动动画。可惜有点遗憾,...
JS 控制的图片可左右滚动代码
jQuery按钮控制图片左右滚动代码是一款鼠标悬停显示遮罩效果,点击箭头按钮图片滚动带加号点详细。
在网站开发中我们经常需要实现一个左右按钮控制图片的功能,这个其实可以用javascript来实现,该文件附带js实现左右滚动图片的源代码及相关文件。
鼠标感应图片无缝左右JS滚动代码是一款无需点击,鼠标悬停控制滚动方向,效果流畅。
左右控制图片滚动,js图片滚动代码,非常好用,希望大家来下载
jQuery图文左右滚动代码(箭头控制)
兼容IE7+ IE6图片格式改下 带左右箭头按钮的js循环滚动图片特效代码
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
两侧可控制的JS左右图片滚动特效代码下载(图片走马灯特效),水平左右风格的图片滚动,两侧的红色按钮可控制图片向右、向左滚动,整体效果平滑自然,代码简洁,如演示截图所示。
鼠标感应使图片无缝滚动,且能鼠标控制左右滚动的JS代码
默认值 (除容器ID必选外,其他参数均可根据情况进行选择设置),参数动态赋值,文字滚动不准确 (本次更新主要目的解决此Bug,感谢周珺参与测试),鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动),由于文档下载过慢而...
s图片滚动制作图片左右无缝滚动效果,通过鼠标感应控制图片左右无缝滚动。js代码。
纯js实现点击左右按钮图片自动左右平滑滚动,默认5个一组左右滚动,可以手动修改js参数更改滑动数量 使用方法: 1、将head中的js以及lanrenzhijia.css样式引入到你的网页中 2、将body中的代码部分拷贝到...
这款特效代码来自搜狐数码频道,主要功能是图片滚动,左右滚动可控制,只需鼠标移到两端的控制按钮上,图片就会自动响应,改变滚动方向。代码是直接从搜狐扒下来的,简单的修正了一下,里面有些链接还保持搜狐的链接...