<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）-JS特效学院|JsWeb.Cn</title>
</head>
<body><!--下面是向上滚动代码-->
<div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;>
<div id=jsweb8_cn_top1>
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
</div>
<div id=jsweb8_cn_top2></div>
</div>
<script>
var speed=30
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2
function Marquee1(){
//当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时
if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端
else{
jsweb8_cn_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;>
<div id=jsweb8_cn_bottom1>
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
</div>
<div id=jsweb8_cn_bottom2></div>
</div>
<script>
var speed=30
jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML
jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight
function Marquee2(){
if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0)
jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight
else{
jsweb8_cn_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)}
jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="jsweb8_cn_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML
function Marquee3(){
if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)
jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth
else{
jsweb8_cn_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}
jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="jsweb8_cn_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML
function Marquee4(){
if(jsweb8_cn_right.scrollLeft<=0)
jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth
else{
jsweb8_cn_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}
jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
<p></p>
更多精彩尽在JS特效学院|<a href="http://www.jsweb8.cn"
target="_blank">www.jsweb8.cn</a>,转载请注明出处（JS特效学院）
</body>
</html>
分享到：
相关推荐
在网页设计中，动态效果是吸引用户注意力的重要手段之一，其中图片的无缝、平滑、上下左右滚动就是一种常见的交互式设计。这种技术通常应用于新闻网站的轮播图、产品展示或者滑动导航等场景，使得用户体验更加生动...
在压缩包中的`js 上下滚动`和`js左右滚动`文件可能包含了具体的实现代码，你可以通过阅读和理解这些代码，加深对上下左右滚动图片机制的理解，也可以直接将它们应用到你的项目中。 总之，JavaScript实现的图片滚动...
至此，我们已经解释了如何通过JavaScript实现图片的上下左右滚动。`pic`文件可能包含多张图片，可以将代码稍作修改，使其支持多个图片的滚动，或者根据实际需求调整滚动速度和方向。这个例子提供了一个基础的框架，...
标题"图片上下左右自动滚动鼠标放上去停止"描述的是一种常见的网页交互设计，这种设计通常应用于图片展示或轮播图组件中，旨在提供一种吸引用户的视觉体验，同时兼顾用户在查看图片时的控制需求。 这个效果的实现...
在JavaScript中，实现图片上下左右滚动的效果是一种常见的动态效果，常用于网站的广告展示或页面美化。本示例主要讲解如何使用JavaScript实现图片的上下滚动。 首先，我们来看标题和描述中提到的关键点：`js图片向...
以上就是使用JavaScript实现图片上下左右滚动及点击放大效果的核心技术和步骤。通过实践和不断优化，可以创建出更加符合用户需求的图片展示效果，提升网站的整体用户体验。在实际项目中，可以参考提供的“图片滑动...
综上所述，实现"实用上下左右滚动的跑马灯JS"涉及到JavaScript基础、DOM操作、CSS样式、定时器、动画效果、方向控制、事件监听和代码优化等多个方面的知识。通过深入理解这些知识点，并结合实际的跑马灯.html文件...
这里提供的代码示例展示了如何使用 JavaScript 实现图片的上下滚动效果。 首先，我们来看向下滚动的代码部分。这部分代码创建了一个名为 `colee` 的 div 元素，设置了固定的高度和宽度，并且设置 `overflow:hidden`...
6. **方向检测**：上下左右滚动需要检测用户滚动的方向。这通常通过比较当前滚动位置和上一次滚动位置来实现，或者利用浏览器提供的滚动事件属性，如`event.deltaY`和`event.deltaX`。 7. **无缝循环**：为实现...
在JavaScript（JS）中，控制图片上下左右移动是网页动态效果的基本实现，广泛应用于网页游戏、交互式设计等场景。本教程将深入讲解如何利用JavaScript实现这一功能。 首先，我们需要在HTML中设置一个图片元素，并为...
"marquee图片无缝滚动（上下左右均可）" 这个标题涉及到一个JavaScript或HTML元素的使用，即`<marquee>`标签，它用于创建一个滚动的效果，通常用于文字或图像的自动滚动。这里的关键词是“无缝滚动”，意味着在滚动...
在JavaScript中实现图片的上下左右滚动效果是一种常见的网页动态效果，可以吸引用户的注意力并增加页面的互动性。这里我们将详细探讨如何使用JavaScript实现一个简单的图片向下滚动的效果。 首先，我们看到HTML部分...
"DIV新闻、图片滚动效果,上下左右方向,简洁JavaScript示例,高浏览器兼容性"是一个专注于使用JavaScript实现的DOM元素（尤其是DIV）滚动效果的教程或代码示例。这个示例旨在帮助开发者创建出具有新闻滚动、图片轮播等...
在网页设计中，吸引用户注意力的一种常见方式是通过动态展示广告，如上下左右滚动的广告效果。本教程将详细讲解如何利用jQuery库实现这样的功能，尤其适用于创建吸引人的广告链接特效。 首先，jQuery是一个强大的...
【标题】"图片左右循环滚动JS代码.zip"所包含的是一个使用JavaScript实现的图片左右循环滚动的代码示例。在网页设计中，这样的功能通常用于展示产品图片、新闻轮播或者广告滑动等，能够吸引用户的注意力并提供交互性...
标题"最简单的图片无缝滚动集成上下左右"暗示我们将探讨一个实现这种效果的简单方法，可能涉及到JavaScript的实现，并且支持四个方向的滚动。 首先，我们来理解“图片无缝滚动”的概念。它是指图片在滚动过程中没有...
这个效果，你也可以说是图片翻页吧，也可以说是一个图片轮显，基于HTML5...如果在手机上测试，那就是手向上滑或向下滑，图片一张一张翻页，可以修改成左右翻页切换那种，上下切换好像不常见，可为你提供一个参考吧。
### 常用JS图片滚动（无缝、平滑、上下左右滚动）代码解析 #### 一、概述 本文档提供了一段实现图片无缝滚动的JavaScript代码。该代码能够实现图片在网页上的平滑滚动，包括上下两个方向。这段代码不仅适用于创建...
标题中的“图片无缝滚动大全，上下左右，自动控制”指的是一个网页中实现的图片滚动效果。这个效果使得图片能够连续不间断地在页面上移动，给用户带来流畅的视觉体验。通常，这种无缝滚动技术用于展示多张图片，比如...