`

图片无缝滚动js代码

阅读更多

向上:
程序代码
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

 


向下:
程序代码
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

 


向左:
程序代码
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

 


向右:
程序代码
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 向上:
程序代码
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

 


向下:
程序代码
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

 


向左:
程序代码
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

 


向右:
程序代码
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

分享到:
评论

相关推荐

    图片左右无缝滚动JS代码

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

    无缝滚动制作js文字无缝滚动和js图片无缝滚动

    本文将深入探讨如何使用JavaScript来实现文字和图片的无缝滚动效果,以及如何通过复制和应用提供的js代码来创建这些效果。 无缝滚动技术的主要目标是让页面内容(无论是文字还是图片)在不中断视觉连续性的情况下...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    "jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...

    图片无缝滚动插件上下左右图片无缝滚动代码.zip

    这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解: 1. **JavaScript基础**:无缝滚动效果主要依赖...

    js产品图片无缝滚动代码向左和向上图片无缝滚动代码

    本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先,我们需要理解无缝滚动的基本原理。它通过调整图片的显示顺序,让最后一张图片紧跟在第一张图片之后,从而在视觉上创造出无中断的滚动效果。...

    鼠标感应图片无缝左右滚动JS代码

    总的来说,"鼠标感应图片无缝左右滚动JS代码"是一种提升网页互动性和视觉吸引力的手段,通过JavaScript实现图片的动态展示,结合HTML和CSS,为用户提供更直观、更具趣味性的浏览体验。在实际应用中,开发者可以根据...

    js无缝滚动代码制作js图片无缝滚动向上无缝滚动

    下面我们将详细介绍如何用JS来制作图片的向上无缝滚动效果: 1. **HTML结构**: 首先,我们需要在HTML中设置一个包含所有图片的容器,例如`&lt;div&gt;`,并给每个图片设置相应的样式,确保它们在同一行排列。容器通常...

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

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

    jQuery图片左右无缝滚动特效代码

    在这个"jQuery图片左右无缝滚动特效代码"中,我们可以期待以下关键知识点: 1. **jQuery库**:jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个特效利用了jQuery提供的...

    简单的图片无缝滚动效果代码免费下载

    "简单的图片无缝滚动效果代码免费下载"这个主题涉及到的是网页设计中的一个常见特效——图片无缝滚动,这是一种使得图片在页面上连续、平滑移动,给予用户连续无中断视觉体验的技术。 无缝滚动通常用于网站的轮播图...

    图片动态循环滚动js代码

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

    html中图片无缝滚动

    在图片无缝滚动中,JavaScript主要负责处理时间间隔、图片切换逻辑和事件监听。例如,可以使用`setInterval`函数每隔一定时间自动切换图片,或者通过`addEventListener`监听用户的鼠标悬停和点击事件,实现手动控制...

    网页图片无缝循环滚动html代码

    根据给定的文件信息,我们可以深入探讨网页图片无缝循环滚动的HTML及JavaScript实现技术。这一技术在网页设计中被广泛运用,特别是在展示产品、广告或背景图像时,它能够为用户带来连续且平滑的视觉体验,提升网站的...

    marquee图片无缝滚动(上下左右均可)

    **标题解析:** "marquee图片无缝滚动(上下左右均可)" 这个标题涉及到...通过以上分析,我们可以了解到`&lt;marquee&gt;`标签和相关插件在实现图片无缝滚动效果中的应用和配置方法,以及它们在网页设计和开发中的注意事项。

    javascript无缝滚动代码

    在探讨“javascript无缝滚动代码”的知识点时,我们主要聚焦于如何通过JavaScript和HTML结合,实现图片的无缝滚动效果。此技术常用于网站设计中的轮播图、广告位或信息流等场景,能够提升用户体验,使页面更加生动...

    js经典效果,图片切换,无缝滚动,js菜单

    在本项目中,我们关注的是几个JavaScript的经典效果:图片切换、无缝滚动和JavaScript菜单。 1. 图片切换: 图片切换效果是网页设计中常见的元素,用于展示多张图片或内容。实现这一效果通常有两种常见方法:CSS3...

    图片向左无缝滚动 图片向左无缝滚动 js

    "图片向左无缝滚动"是一个利用JavaScript技术实现的功能,它能够让一组图片在水平方向上连续不断地滚动,给人一种不间断的视觉感受。这个功能尤其适用于展示产品序列、新闻更新或者任何需要连续显示信息的场景。 ...

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

    本文将深入探讨这种支持单排图片上下滚动和无缝滚动的js图片滚动插件。 首先,单排图片上下滚动是指在网页的一行(或一列)内展示图片,并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的...

    脚本实现图片无缝滚动

    JavaScript是实现图片无缝滚动的核心语言,主要用于控制图片的切换和动画效果。在实现过程中,我们需要创建一个函数来处理图片的切换,并设定定时器来自动执行这个函数,形成连续滚动的效果。 1. 获取图片元素:...

Global site tag (gtag.js) - Google Analytics