`
hyxingzi
  • 浏览: 2404 次
  • 性别: 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
分享到:
评论

相关推荐

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

    "JS动态可控制左右滚动的图片代码" 描述简洁明了,确认了这个代码是用于实现JavaScript控制的图片滚动功能。这个描述暗示了代码可能包含事件监听、DOM操作以及动画效果等元素。 【标签解析】 "JS特效-图片相册" 这...

    js动态可控制左右滚动图片

    在网页设计中,动态效果是吸引用户注意力的重要...以上就是关于使用JavaScript实现动态控制图片左右滚动的详细过程,希望对你有所帮助。在实际开发中,你可以根据具体需求进行调整和优化,让图片滚动效果更加生动有趣。

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

    标签“JS动态可控制左右滚动”进一步强调了这个技术点的核心——JavaScript控制的图片滚动效果。这种效果在现代网页设计中非常常见,能够有效地吸引用户的注意力,提升网站的互动性和专业感。 至于压缩包中的文件...

    图片鉴赏JS动态可控制左右滚动的图片代码(支持自动播放)

    本主题聚焦于一个特定的应用场景:使用JS创建一个图片鉴赏功能,它支持用户通过点击按钮或自动播放来控制图片左右滚动。这种功能常见于在线相册、产品展示或者画廊类网站,为用户提供了一种流畅且互动性强的图片浏览...

    图片动态循环滚动js代码

    【标题】"图片动态循环滚动js代码"是一个用于网页中实现图片轮播效果的JavaScript解决方案。这个技术主要用于提升用户体验,特别是在展示多张图片时,通过动态循环滚动的方式,让用户能够轻松浏览并欣赏到所有图片。...

    jQuery图片左右滚动效果代码.zip

    总结来说,"jQuery图片左右滚动效果代码"是通过jQuery的DOM操作、事件处理和动画制作等功能,结合自动轮播和左右箭头交互,实现了一种动态的图片展示效果。这样的代码对于提升网站的视觉吸引力和用户体验有着重要...

    JS动态时限按钮可控制左右滚动的图片

    通过学习和实践这些知识点,你不仅可以实现这个“JS动态时限按钮可控制左右滚动的图片”的项目,还能掌握更广泛的前端开发技能。在实际开发过程中,不断调试和优化代码,会使你对JavaScript和网页动态效果有更深的...

    js图片向上下左右滚动的代码 图片向上滚动js代码

    首先,我们来看标题和描述中提到的关键点:`js图片向上下左右滚动的代码` 和 `图片滚动`。这些关键词暗示我们要创建一个JavaScript函数,该函数能够控制HTML中的图片元素沿着四个方向(上、下、左、右)平滑滚动。 ...

    图片左右循环滚动JS代码.zip

    【标题】"图片左右循环滚动JS代码.zip"所包含的是一个使用JavaScript实现的图片左右循环滚动的代码示例。在网页设计中,这样的功能通常用于展示产品图片、新闻轮播或者广告滑动等,能够吸引用户的注意力并提供交互性...

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

    【标题】"JS动态可控制左右滚动的图片特效代码"涉及到的是JavaScript编程中关于图片滚动效果的实现。这种效果常用于网站的轮播图、广告展示等,为用户提供一种交互式的浏览体验。以下是对这个主题的详细解释: 一、...

    图片左右滚动代码

    "图片左右滚动代码"就是一种实现这一效果的技术,主要通过JavaScript(JS)来控制图片的滚动动画,使得图片能够按照设定的方向连续、平滑地移动,通常应用于轮播图或跑马灯效果。这种技术对于网页设计师和前端开发者...

    JS控制图片左右滚动代码

    在这个栏目中,新浪采用了两个滚动动画,点击左右箭头,图片可以一张张切换,切换得一点都不“唐突”,这就是jquery的功能了。像这样的动画,很常见,之前我在腾讯的女性频道上也做过此类的滚动动画。可惜有点遗憾,...

    左右图片自动滚动代码

    1. **JavaScript**:在这些压缩包中,如"js图片左右滚动 可停止放大.rar",JavaScript是实现图片滚动的核心技术。通过编写JS脚本,我们可以控制图片的显示和动画效果,例如设置定时器来实现间隔性滚动,或者添加事件...

    jquery图片左右滚动按钮控制图片左右滚动效果代码

    本主题聚焦于"jquery图片左右滚动按钮控制图片左右滚动效果代码",这是一种常见的网页交互设计,常见于产品展示或图片轮播场景。通过使用jQuery,我们可以实现用户点击左右按钮来平滑地滚动图片,提升用户体验。 ...

    适合左右全屏的左右滚动图片代码

    标题提到的“适合左右全屏的左右滚动图片代码”正是针对这种需求而设计的解决方案。 这个代码的核心目标是确保图片在浏览器窗口中始终占据100%的宽度,无论用户如何调整浏览器的大小。它通过响应式布局和JavaScript...

Global site tag (gtag.js) - Google Analytics