<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
<div id="colee_bottom1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed=30
var colee_bottom2=document.getElementById("colee_bottom2");
var colee_bottom1=document.getElementById("colee_bottom1");
var colee_bottom=document.getElementById("colee_bottom");
colee_bottom2.innerHTML=colee_bottom1.innerHTML
colee_bottom.scrollTop=colee_bottom.scrollHeight
function Marquee2(){
if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
colee_bottom.scrollTop+=colee_bottom2.offsetHeight
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id="colee_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=30//速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id="colee_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML
function Marquee4(){
if(colee_right.scrollLeft<=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_right.onmouseover=function() {clearInterval(MyMar4)}
colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束--></body>
</html>
分享到：
相关推荐
综上所述，JavaScript无缝滚动效果是通过JavaScript和CSS的结合实现的一种动态展示技术，它可以增强网页的视觉吸引力和用户体验。通过理解其工作原理和实践，开发者可以创造出更多富有创意的滚动效果。
而`无缝滚动.html`则可能是一个图片无缝滚动的示例，它可能包含了JS代码来处理图片的显示顺序和动画效果。 4. **实现步骤**： - 首先，需要创建HTML结构，包括要滚动的图片或文字元素。 - 其次，编写CSS样式，...
### 常用JS图片滚动（无缝、平滑、上下左右滚动）代码解析 #### 一、概述 本文档提供了一段实现图片无缝滚动的JavaScript代码。该代码能够实现图片在网页上的平滑滚动，包括上下两个方向。这段代码不仅适用于创建...
"图片向左无缝滚动"是一个利用JavaScript技术实现的功能，它能够让一组图片在水平方向上连续不断地滚动，给人一种不间断的视觉感受。这个功能尤其适用于展示产品序列、新闻更新或者任何需要连续显示信息的场景。 ...
【标签】同样为“鼠标可控的无缝图片滚动代码.rar”，这表明这个压缩文件的核心内容就是关于如何控制图片在网页上进行无缝滚动的代码示例或实现。 【压缩包子文件的文件名称列表】中有一个名为“鼠标可控的无缝图片...
在“常用JS图片滚动（无缝、平滑、上下左右滚动）.txt”文件中，可能包含了实现这种效果的具体代码示例或详细教程。通过阅读和学习这些内容，你可以更深入地了解如何使用JavaScript来创建各种图片滚动效果，并将其...
在网页设计中，滚动图片是一种常用的视觉效果，它可以通过JavaScript来实现。这种效果不仅能够增强网站的互动性，还可以提高用户体验。本文将详细介绍如何利用纯JavaScript实现滚动图片的效果，并对代码进行逐行解析...
JavaScript图片滚动是一种常见的网页动态效果，它可以为用户提供更生动、吸引人的浏览体验。本文将详细介绍如何使用JavaScript实现图片的无缝、平滑、上下左右滚动效果。 首先，我们要明白JavaScript图片滚动的基本...
在提供的代码示例中，通过JavaScript结合CSS实现了一个类似`<marquee>`标签的无缝循环滚动效果。 - **关键代码解析**： - **CSS样式**：定义了滚动区域的背景颜色、溢出隐藏、宽度和高度等样式。 - **HTML结构**...
3. **JavaScript逻辑**：通过`<script>`标签内的代码，设置滚动速度、获取DOM元素引用、克隆内容、定义滚动函数和控制事件监听，实现了跑马灯的无缝滚动效果。 #### 四、应用场景 跑马灯无缝滚动适用于多种场景，...
【myslideLeftRight基于jQuery图片左右无缝滚动插件】是一个常用的JavaScript组件，它利用jQuery库实现了图片在网页中左右平滑地无缝滚动效果。这个插件适用于网站的轮播图、产品展示等场景，能够为用户提供流畅且...
在如今的Web开发中，图片无缝滚动是一项常用的技术，它能够让图片在网页上连续不断地滚动，给用户带来动态的视觉效果。虽然有各种各样的插件可以帮助我们轻松实现这个效果，但是了解如何用原生JavaScript实现图片的...
jQuery焦点图片无缝滚动轮播插件是Web开发中常用的一种组件，它主要用于网站的首页或者产品展示区域，能够以动态、美观的方式展示一系列图片或内容。这种插件通常具有自动播放、手动切换、导航点指示等功能，提升...
本文整理汇总了JavaScript实现图片滚动的常见代码，可以实现向上下左右四个方向的无缝滚动的效果，这是前端设计开发时常用的一个图片特效，你可只用其中的一种滚动效果。 具体的实例代码如下： <!DOCTYPE ...
JavaScript 和 jQuery 是网页开发中常用的库，用于增强用户体验和实现动态交互效果。在这个主题中，"js jquery 文字图片滚动" 指的是利用这两种技术实现的文字和图片在页面上滚动的效果。这种效果常见于新闻网站、...
jQuery库因其强大的DOM操作和事件处理能力，成为实现无缝滚动效果的常用工具。 在jQuery无缝滚动中，主要涉及以下几个核心知识点： 1. **jQuery选择器**：jQuery提供了一套丰富的选择器，如ID选择器(#id)、类选择...
这个压缩包的核心组件是kxbdSuperMarquee插件，它具备丰富的功能，如图片与文字的无缝滚动、图片翻滚以及banner制作等。 首先，我们来深入了解一下jQuery。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML...
无缝滚动效果是一种常见的网页特效，尤其是在新闻滚动条、产品展示滚动条等场景中十分常用。在Web开发中，实现无缝滚动效果主要通过JavaScript编程语言来控制HTML元素，使得列表元素能够在达到边界后无间断地继续...
### jQuery实现图片无缝滚动 #### 1. jQuery基础 首先，需要了解jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过减少HTML文档遍历、事件处理、动画和Ajax交互时间来简化了JavaScript编程。在本例中，...