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

不错的图片新闻水平滚动JS代码

 
阅读更多
代码特点: 
1,JS代码进行有效封装过!
2,修改比较容易

不足之处在于翻滚过程动静太大。
   
  • tpgd.rar (251.7 KB)
  • 下载次数: 1120
分享到:
评论
7 楼 vision2000 2010-02-09  
相当不错!
6 楼 rainsilence 2010-02-08  
还有appendChild的方法同样在sample里有体现
5 楼 rainsilence 2010-02-08  
1.你是说最后一张图片回到第一张图片的时候动静太大?
你这个问题很容易解决。在移动到第二张页面的时候把第一个图片粘到最后一张的后面就成了。这样顺序会变成1->2->3->4->1。然后点击下面数字的时候,把点击的图片粘到当前图片的后面,在移动的时候进行排序。比如当前是2,然后你点了4,那么在点击的时候,图片顺序为2->4->1->3。然后将2移动完成的时候变成4->1->2->3的顺序。

黏贴的方法为appendChild,用树形中已有的节点插入意味着节点的移动。这样动静就会小很多。而且速度不慢。

2.我觉得你的功能实现了,但是代码复杂度可以降低。我写了一个Timer类用于封装setTimeout,setInterval。在我的博客里,关于Timer类的Sample里也实现了一个类似于你这个功能的小应用程序,代码比你要简单很多。。。
4 楼 welody 2010-02-08  
视觉效果很不错。不过这个是有声音的?
3 楼 need_faith 2010-02-08  
简洁、优雅,赞
2 楼 dayone 2010-02-08  
效果挺不赖的~
1 楼 fangzhongteng 2010-02-06  
   先下载看看,看完后再来交流

相关推荐

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

    可以将图片排列在一行,然后改变元素的 `left` 或 `right` 属性来实现水平滚动。可以创建类似的 `Marquee` 函数,调整元素的水平位置,同时配合 `onmouseover` 和 `onmouseout` 事件来控制滚动的启停。 总的来说,...

    图片左右无缝滚动JS代码

    "图片左右无缝滚动JS代码"是指使用JavaScript编程语言实现的一种特效,它允许图片在水平方向上连续、平滑地滚动,模拟出一种无限循环的效果,为用户带来更为连贯的浏览体验。这种效果尤其适用于新闻轮播、产品展示或...

    JS图片左右滚动效果代码

    本文将详细解析一段JavaScript代码,该代码能够实现图片左右自动滚动的效果,并支持鼠标悬停时暂停滚动的功能。此效果不仅美观实用,而且兼容各大主流浏览器。 #### 二、HTML结构分析 首先,我们来看一下HTML部分...

    ASP滚动新闻代码ASP滚动新闻代码ASP滚动新闻代码

    根据给定的信息,本文将详细解释ASP滚动新闻代码的相关知识点,包括如何实现新闻滚动效果、ASP页面中的元素解析以及数据库连接等内容。 ### ASP滚动新闻代码分析 #### 1. HTML与Marquee标签 首先,我们注意到HTML...

    JS鼠标滚轮水平滚动特效.zip

    在实际应用中,"JS鼠标滚轮水平滚动特效"可以用于图片画廊、产品展示、数据图表等场景,尤其是在需要展示长而窄的内容或者多列并排内容时。开发者可以通过自定义参数,比如滚动速度、灵敏度等,来调整特效以适应不同...

    图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向

    标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片,以滚动的方式呈现,使得用户无需手动翻页就能浏览到...

    CSS + Js实现图片水平滚动

    - `script.js`: JavaScript代码,实现图片滚动和速度控制逻辑。 通过结合这些文件,你可以构建一个完整的图片水平滚动效果。在实际应用中,还可以考虑兼容性问题,使用polyfill或适配不同的浏览器。同时,也可以...

    js点击图片放大缩小水平滚动条拖动图片滚动展示

    在JavaScript(JS)编程中,实现图片的点击放大缩小以及水平滚动条拖动来滚动展示图片的功能是一项常见的需求。这个功能通常应用于网页上的图像查看器或者产品细节展示,让用户能够更方便地查看图像的各个部分。以下...

    常用JS图片滚动(无缝、平滑、上下左右滚动)代码

    本文档提供了一段实现图片无缝滚动的JavaScript代码。该代码能够实现图片在网页上的平滑滚动,包括上下两个方向。这段代码不仅适用于创建动态视觉效果,还能帮助开发者了解基本的DOM操作与JavaScript定时器的使用...

    横向滚动图片代码.rar

    本压缩包文件"横向滚动图片代码.rar"提供了一个实现这一功能的JavaScript代码示例。 JavaScript(简称JS)是网页开发中的重要脚本语言,它可以操作DOM(文档对象模型),控制网页元素的行为。在“JS特效-滚动代码”...

    js 滚动图片代码

    在本场景中,"js滚动图片代码"指的是利用JavaScript技术来制作图片滚动展示的效果,这种效果常见于网站的轮播图、滚动新闻等模块。 在JavaScript中,实现图片滚动主要有以下几种方法: 1. **CSS动画与JavaScript...

    jQuery图片水平垂直滚动切换代码mySystem.js插件.zip

    这是一款基于mySystem.js插件实现的图片水平垂直滚动切换特效,支持平滑抖动切换jQuery轮播图代码。 js代码 [removed][removed] [removed][removed] [removed] $(function(){ //回调函数计数 var callback...

    兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码

    通过CSS,我们可以设置容器的宽度大于其内容的宽度(对于水平滚动)或高度大于内容的高度(对于垂直滚动),这样图片就可以在容器内滚动。同时,利用`overflow`属性隐藏超出容器部分的图片。 接下来是JavaScript...

    横向无缝左右滚动的JS图片展示代码

    在提供的压缩包“可以左右移动横向无缝滚动的JS图片展示代码”中,包含了实现这些功能的源代码。通过对这些代码的分析和学习,你可以理解并掌握如何利用JavaScript实现横向无缝左右滚动的图片展示效果。在实际应用中...

    Jquery div、图片水平滚动到最后一张

    标题“Jquery div、图片水平滚动到最后一张”涉及的是使用jQuery来实现一个功能,即在一个div容器内,使其中包含的图片能够自动从左到右水平滚动,并在滚动到最后一张后重新开始循环。 首先,我们需要理解jQuery中...

    jQuery水平滚动企业发展大事件时间轴代码

    **jQuery水平滚动企业发展大事件时间轴代码详解** 在网页设计中,展示企业的发展历程或重要事件通常需要一种直观且吸引人的方法。"jQuery水平滚动企业发展大事件时间轴代码"正是一种实现这一目标的有效工具。这款...

    js无缝图片滚动代码素材.rar

    【标题】"js无缝图片滚动代码素材.rar"指的是一个JavaScript实现的无缝图片滚动代码资源,它可以帮助网页开发者创建出平滑、高效的图片展示效果。在网页设计中,图片滚动是一种常见的交互元素,常用于新闻更新、产品...

    6屏左右循环滚动图片代码

    首先,我们要理解6屏左右循环滚动图片代码的核心是JavaScript和CSS。JavaScript通常用来处理动态效果,如定时更换图片、检测用户交互等,而CSS则用于布局和样式设置。在实际实现中,我们可以利用CSS的`position`属性...

    JS三图横向滚动代码

    "JS三图横向滚动代码"就是这样的一个实现方式,它能够让网页中的三张图片进行自动或手动的水平滚动,增加视觉吸引力。 在描述中提到的"很好用的js代码,可以左右滚动,自动滚动,都是横向的哦!~"表明这个代码实现...

    图片,文字滚动脚本代码

    具体来说,它能够使一系列的图片在网页上水平或垂直滚动展示,并且可以通过鼠标悬停来暂停滚动效果,从而提供更加丰富的用户交互体验。下面将分别从HTML结构、JavaScript逻辑以及整体工作原理等方面进行详细介绍。 ...

Global site tag (gtag.js) - Google Analytics