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

javascript控制html图片/文本循环不间断滚动

阅读更多
1.首先在创建一个层,可以是绝对定位层,也可以是某个单元格内的相对定位层!

2.在层中创建一个1行2列的表格

3.给层id命名为demo,给第一个单元格命名为demo1,第二个单元格命名为demo2

4.根据所要显示的宽度和高度给层的style手动写入style="overflow:hidden;width:700px;height:190px;"

5.在第一个单元格中横向插入width大于350px,height=190px的图片(大于)2张

eg:<TR>
    <TD><div id="demo" style="overflow:hidden;width:700px;height:190px;">
      <table width="700" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="demo1"><img src="image/1.jpg" width="360" height="190"><img src="image/2.gif" width="360" height="190"><img src="image/3.jpg" width="360" height="190"><img src="image/ad-01.jpg" width="360" height="190"><img src="image/ad-02.jpg" width="360" height="190"><img src="image/ad-03.jpg" width="360" height="190"><img src="image/ad-04.jpg" width="360" height="190"></td>
          <td id="demo2">&nbsp;</td>
        </tr>
      </table>
    </div></TD>
  </TR>

6.编写JavaScript代码

eg:<SCRIPT>
var speed=5;  //设置图片滚动速度
demo2.innerHTML=demo1.innerHTML;  //复制demo1为demo2(直接把id名称作为该标签的对象)
function Marquee(){
if(demo1.offsetWidth==demo.scrollLeft) //当滚动至demo1与demo2交界时
{
  demo.scrollLeft=0;     //dome跳到最左端
}
else
{
  demo.scrollLeft++;
}
}

  //鼠标移上时清除定时器达到滚动停止的目的
function stopMove()
{
  clearInterval(MyMar);
}

var MyMar=setInterval(Marquee,speed); //设置定时器
demo.onmouseover=stopMove;  //鼠标移上时清除定时器达到滚动停止的目的(调用的第一种方法)
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器,继续滚动//(调用的第二种方法)
</SCRIPT>



备注:可以通过id的名字直接把该标签当做对象来使用!不过前提是JavaScript代码必须写字body的层后面,因为JavaScript的运行方式是逐行解释执行的!否则demo这个名称不被认为是对象
分享到:
评论

相关推荐

    不间断 滚动图片 滚动文字

    不间断滚动图片通常通过JavaScript、jQuery或现代前端框架如Vue、React来实现。基本思路是设置一个定时器,每隔一定时间更新图片的位置,给用户造成图片在不断滚动的视觉效果。具体步骤如下: - 使用CSS将图片容器...

    javascript不间断文字滚动控制代码

    为了实现不间断滚动,我们可以使用JavaScript的`setInterval`函数来定时调整文本的位置。这里我们可以用CSS的`transform`属性来实现平移效果: ```javascript var scrollingText = document.getElementById('...

    jquery图片横向、纵向不间断滚动

    标题中的"jquery图片横向、纵向不间断滚动"是指利用jQuery实现一种图片在页面上不断循环移动的效果,既可以在水平方向滚动,也可以在垂直方向滚动。 首先,我们来了解一下jQuery库。jQuery是由John Resig在2006年...

    JS实现文本不间断上线滚动效果【转】

    `index % lines.length`确保当所有行都滚动过之后,能回到第一行,实现不间断滚动。 需要注意的是,实际应用中可能需要根据具体需求调整滚动速度、文本样式、是否支持暂停/恢复滚动等功能。此外,对于复杂的滚动...

    jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐

    标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例,它主要用于创建一串文字在单一行内循环滚动,通常用于网站的头部或侧边栏,以动态展示最新的新闻标题或公告。 要实现这个效果,首先...

    jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动

    5. **不间断滚动**: 指的是滚动过程持续进行,没有停顿,除非用户进行其他操作。 为了实现这个效果,我们通常需要以下步骤: 1. **HTML结构**:在`index.html`中,我们需要创建一个包含滚动内容的容器,例如一个`...

    JS不间断向上滚动

    在网页设计中,"不间断向上滚动"是一种常见的特效,它使得页面内容以连续、循环的方式从底部向上滚动,给予用户一种新颖的浏览体验。这种效果在新闻网站、公告栏或者展示大量文本信息的场景中尤为常见。 实现JS不...

    不间断无接缝图片滚动

    实现不间断无接缝图片滚动,通常需要结合HTML(超文本标记语言)和JavaScript(一种脚本语言)这两种技术。HTML是网页的基础框架,用来定义页面的结构和内容,而JavaScript则负责处理动态交互和功能实现。 1. HTML...

    图片及文本无缝滚动

    【标题】"图片及文本无缝滚动"涉及到的是网页动态效果设计的一种常见技术,它使得页面中的图片或文本在用户眼前不间断地循环滚动,为用户提供流畅的视觉体验。这种技术广泛应用于新闻滚动、广告展示以及各类信息展示...

    MSClass Class Of Marquee Scroll通用不间断滚动JS封装

    本文将详细讨论“MSClass Class Of Marquee Scroll通用不间断滚动JS封装”这一主题,这是一种利用JavaScript实现的滚动效果,旨在为网页元素提供无缝、连续的滚动动画。 一、Marquee效果简介 Marquee效果源自HTML4...

    js 文字无限,有间断往上滚动

    我们首先需要理解这个功能的基本概念:通过JavaScript(简称JS)实现一段文本或多个文本元素在网页上以连续但带有间断的方式向上滚动,同时当滚动到一定程度时,文本会重新出现在屏幕底部,形成一种循环滚动的效果。...

    向上不间断滚动div+css+js模板.docx

    其中,“向上不间断滚动”是一种常见的需求,尤其是在新闻滚动、公告展示等场景下非常实用。本文将详细介绍如何使用HTML、CSS和JavaScript来实现这一功能,并通过具体的代码示例帮助读者更好地理解和掌握。 #### 二...

    JS title栏文字不间断滚动

    【标题】"JS title栏文字不间断滚动"是一个常见的前端网页特效,主要应用于网站标题的动态展示,以吸引用户的注意力。这种效果通常是通过JavaScript语言来实现的,让标题栏中的文字像跑马灯一样循环滚动,既增加了...

    MSClass通用不间断滚动JS封装类

    "MSClass通用不间断滚动JS封装类"是专门为实现网页元素不间断滚动效果而设计的一个JS库。这样的库通常会对滚动功能进行优化,使其更加高效且易于在不同项目中复用。 MSClass的核心特性在于它的封装性。封装意味着将...

    Js+CSS实现的间断和不间断文本滚动代码

    总的来说,这个示例展示了如何结合 JavaScript 和 CSS 实现两种不同的文本滚动效果:不间断滚动和间断滚动。通过调整参数 `speed` 和 `delay`,我们可以自定义滚动的速度和间断的时长,以适应不同场景的需求。这种...

    无间断向左滚动jquery代码(走马灯)

    无间断滚动意味着当最后一个元素滚动出视区后,第一个元素应立即重新出现在视区左侧,形成无缝循环。这通常通过计算容器宽度、每个元素的宽度以及当前显示的元素位置来实现。当需要滚动时,检查是否已经到达了最后一...

    实现连续滚动文字效果,无间断

    根据给定文件的信息,本文将详细介绍如何实现网页上连续滚动的文字效果,并确保其无间断地展示。在实际开发过程中,这种效果常用于新闻滚动、公告栏等场景,能够有效地吸引用户注意力并传达重要信息。 ### 实现原理...

    jquery向上循环滚动特效.zip

    【jQuery向上循环滚动特效】是一种常见的网页动态效果,它利用JavaScript库jQuery实现文本或图片在页面上持续向上滚动,为用户展示信息。这种特效在新闻网站、公告栏或者广告展示等场景中尤为常见,能够有效地吸引...

Global site tag (gtag.js) - Google Analytics