`
pxchen
  • 浏览: 85192 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图片滚动

    博客分类:
  • js
 
阅读更多
<div id="demo" style="overflow: hidden; width: 300px; height: 120px; background-color:#00cc66;">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="demo1" nowrap="nowrap">
<img src="http://image2.sina.com.cn/home/images/sina_logo2.gif" />
<img src="http://image2.sina.com.cn/home/images/sina_logo2.gif" />
<img src="http://image2.sina.com.cn/home/images/sina_logo2.gif" />
<img src="http://image2.sina.com.cn/home/images/sina_logo2.gif" />
<img src="http://image2.sina.com.cn/home/images/sina_logo2.gif" />
</td>
<td id="demo2" nowrap="nowrap"></td>
</tr>
</tbody>
</table>
</div>
<script language="javascript">
var speed = 20
function Marquee()
{
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft -= demo1.offsetWidth
}
else
{
demo.scrollLeft ++
}

}

//demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}

window.onload = function()
{
if(demo.offsetWidth < demo1.offsetWidth)
{
demo2.innerHTML=demo1.innerHTML
var MyMar=setInterval(Marquee,speed)
}
}
</SCRIPT>
分享到:
评论

相关推荐

    用php实现图片滚动

    图片滚动功能概述 根据提供的描述,“在PHP中可能会想到要实现一个图片滚动的程序,此程序可以提供这样的功能”,我们可以推断出本篇文章的目标是介绍如何利用PHP(尽管实际代码使用的是JavaScript与HTML)来创建一...

    WinForm 实现图片滚动

    ### WinForm 中实现图片滚动的知识点详解 #### 一、基础知识概述 在Windows Forms(WinForms)应用程序开发中,有时我们需要实现动态效果,比如图片滚动显示。本文将详细介绍如何利用WinForms中的`PictureBox`和`...

    Delphi 图片滚动播放

    在Delphi编程环境中,实现图片滚动播放功能是一项常见的任务,特别是在创建多媒体应用或者展示类软件时。本教程将深入探讨如何使用Delphi 7.0来实现这一功能,包括图片的加载、显示以及循环播放机制。 首先,我们...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    JavaScript 图片滚动插件是一种广泛应用于网页设计中的动态效果工具,它使得图片展示更加生动有趣。在网页设计中,图片滚动通常用于展示多张图片,尤其是对于产品展示、新闻更新或者图片滑块等场景,能有效提升用户...

    htmlcss 图片滚动特效

    "图片滚动特效"是一种常见的网页动态效果,可以增加用户交互性和视觉吸引力。在这个专题中,我们将深入探讨如何使用HTML和CSS实现这样的效果,同时也会提及JavaScript在其中可能扮演的角色。 首先,`index.html`是...

    jQuery图片滚动自适应浏览器

    【jQuery图片滚动自适应浏览器】是一种网页设计技术,利用JavaScript库jQuery实现图片在不同分辨率的浏览器窗口中自动调整尺寸并流畅滚动。这种技术通常应用于全屏或焦点图展示,为用户提供一个美观且交互性强的浏览...

    html5实现的图片滚动效果

    在图片滚动效果中,这些元素可以用来包裹每一张图片,并提供相应的描述或标题。例如: ```html 图片1"&gt; 这是图片1的描述 ``` 其次,CSS3(层叠样式表)在HTML5中发挥了重要作用,特别是在动画和过渡效果方面。...

    微信小程序实现图片滚动效果示例

    微信小程序实现图片滚动效果的主要技术是利用了微信小程序中的swiper组件。这一组件是一种滑块视图容器,常被用于图片轮播、广告展示等场景。在使用swiper组件时,开发者需要遵循一定的技术规范和注意事项以保证组件...

    html实现图片滚动

    在网页设计中,图片滚动是一种常见的动态效果,用于展示多张图片并使它们按照特定顺序自动切换,以吸引用户注意力并提升用户体验。本教程将深入探讨如何使用HTML和JavaScript实现图片滚动效果,这对于Web开发者来说...

    javascript主题图片滚动

    JavaScript主题图片滚动是一种常见的网页动态效果,用于展示一组图片并以滑动或切换的方式呈现,为网站增添视觉吸引力。在互联网上,这种技术被广泛应用于网站的首页、产品展示、轮播广告等场景,以优雅地展示信息并...

    鼠标点击按钮图片滚动

    一、图片滚动机制 图片滚动通常涉及到图像数组或集合的管理。当用户点击按钮时,程序会按照预设顺序显示或循环显示一系列图片。这种滚动可以是水平的,也可以是垂直的,根据设计需求而定。 1. 图片轮播(Carousel)...

    jquery图片滚动效果

    **jQuery图片滚动效果详解** 在Web开发中,动态图片展示是一种常见的交互设计,它能吸引用户的注意力并提高网站的用户体验。jQuery,一个流行的JavaScript库,提供了丰富的API和方法,使得实现图片滚动效果变得简单...

    左右控制图片滚动

    在网页设计中,图片滚动效果是一种常见的视觉呈现方式,它能增强用户体验,吸引用户的注意力。"左右控制图片滚动"是一个JavaScript实现的特效,主要用于展示一组图片,并通过左右按钮或者手势来控制图片的前后切换,...

    图片滚动中间放大效果

    "图片滚动中间放大效果"是一种常见的网页设计技巧,它通常应用于产品展示、图片滑块或轮播图组件中。这种效果使得图片在滚动过程中,当图片位于视口中央时自动放大,从而突出显示当前主要内容,为用户带来更生动的...

    HTML图片滚动效果

    对于图片滚动效果,JavaScript可以通过修改图片的CSS属性(如`left`或`top`)来改变其位置,从而实现滚动效果。例如,定时器(`setInterval`)可以周期性地改变图片的位置: ```javascript var img = document....

    jQuery两排图片滚动

    **jQuery两排图片滚动**是一种常见的网页动态效果,用于展示多张图片,通常在产品展示、广告轮播或新闻更新等场景中应用广泛。通过利用jQuery库的强大功能,开发者可以轻松实现这种滚动效果,使用户体验更加生动和...

    WPF图片滚动效果

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)中实现图片滚动效果,这对于初学者来说是一个很好的学习项目,能够帮助他们提升编程技能,同时增加程序的视觉吸引力。 WPF是.NET Framework...

    web页面效果——JS实现图片滚动

    "JS实现图片滚动"是一种常见的网页特效,尤其适用于展示图像集或者新闻轮播。本文将深入探讨如何使用JavaScript来实现图片滚动效果,以及这一过程中涉及的关键知识点。 首先,我们要理解JavaScript(简称JS)在网页...

    图片滚动 JS控制 (带数字)

    在网页设计中,图片滚动是一种常见的视觉效果,用于展示多张图片或信息,通常与JavaScript(JS)结合使用以实现动态交互。"图片滚动 JS控制 (带数字)"的主题指的是利用JavaScript来创建一个图片轮播组件,这个组件...

    jQuery+CSS实现的图片滚动效果

    【jQuery+CSS实现的图片滚动效果】是一种常见的网页动态展示技术,它利用JavaScript库jQuery和样式表语言CSS来创建引人注目的图像滑动或滚动展示。这种效果在网站上广泛应用,例如产品展示、新闻轮播、幻灯片等,为...

Global site tag (gtag.js) - Google Analytics