本文主要讲解运用相同的js代码，使图片向左滚动或文字向左滚动
文字向左滚动，无缝滚动且划过停止，纯javascript。
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
font-size: 12px;
height: 30px;
line-height: 30px;
padding: 5px;
}
#demo a{
color:#333;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
</head>
<body>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=231">山东大学</a>
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=205">中北大学</a>
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=377">华中科技大学</a>
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=333">西安工程大学</a>
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=359">西北工业大学</a>
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=91">西南民族大学</a>
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=246">中国海洋大学</a>
<a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=64">中国科技大学</a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
图片向左滚动，无缝滚动且划过停止，纯javascript。
<!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>无标题文档</title>
</head>
<body>
<div id="colee_left" style="overflow:hidden;width:920px; margin:0px; padding:0px; height:142px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_left1" valign="top" align="center">
<table cellpadding="3" cellspacing="0" border="0">
<tr align="center">
<td><div class="kuang">
<div class="photo_top"></div>
<div class="photo_pic"><a href="#"><img src="images/lzp.jpg" width="169" height="116" /></a></div>
<div class="photo_name"><a href="#">老照片</a></div>
</div></td>
<td><div class="kuang">
<div class="photo_top"></div>
<div class="photo_pic"><a href="#"><img src="images/lzp.jpg" width="169" height="116" /></a></div>
<div class="photo_name"><a href="#">老照片</a></div>
</div></td>
<td><div class="kuang">
<div class="photo_top"></div>
<div class="photo_pic"><img src="images/lzp.jpg" width="169" height="116" /></div>
<div class="photo_name"><a href="#">老照片</a></div>
</div></td>
<td><div class="kuang">
<div class="photo_top"></div>
<div class="photo_pic"><img src="images/lzp.jpg" width="169" height="116" /></div>
<div class="photo_name"><a href="#">老照片</a></div>
</div></td>
<td><div class="kuang">
<div class="photo_top"></div>
<div class="photo_pic"><img src="images/lzp.jpg" width="169" height="116" /></div>
<div class="photo_name"><a href="#">老照片</a></div>
</div></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>
</body>
</html>
本博客陆续推出，多种滚动特效，欢迎访问！
分享到：
相关推荐
无缝滚动 文字滚动 图片滚动 网页文字滚动代码 js图片滚动 无缝滚动向上向下向左向右的代码 四个方向
"图片向左无缝滚动"是一个利用JavaScript技术实现的功能，它能够让一组图片在水平方向上连续不断地滚动，给人一种不间断的视觉感受。这个功能尤其适用于展示产品序列、新闻更新或者任何需要连续显示信息的场景。 ...
本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先，我们需要理解无缝滚动的基本原理。它通过调整图片的显示顺序，让最后一张图片紧跟在第一张图片之后，从而在视觉上创造出无中断的滚动效果。...
- 当容器向左移动到最后一张图片后，通过`css('left', 0)`将其重置回初始位置，实现无缝循环滚动。 这个简单的jQuery图片向左滚动代码可以作为网页中动态展示图片的基础，你可以根据实际需求进行调整，例如添加...
【标题】图片左右无缝滚动JS代码 在网页设计中，图片滚动效果是一种常见的动态展示方式，可以吸引用户的注意力并提供视觉上的吸引力。"图片左右无缝滚动JS代码"是指使用JavaScript编程语言实现的一种特效，它允许...
"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术，它使得图片能够在页面上以平滑、连续的方式移动，既可以从左到右，也可以从上到下，为用户带来流畅的视觉体验。 jQuery是一个...
实现这种无缝滚动图片的JavaScript代码通常包含以下几个关键部分： 1. **DOM操作**：首先，你需要获取到HTML中的图片元素。这可以通过`document.getElementById`或`document.querySelector`等方法完成。然后，可能...
这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解： 1. **JavaScript基础**：无缝滚动效果主要依赖...
它需要监听鼠标移动事件（`mousemove`），获取鼠标相对于容器的位置，然后根据鼠标向左或向右移动来改变图片的位置。为了实现“无缝”效果，当图片滚动到边界时，需要将第一张或最后一张图片移动到队列的另一端，...
此外，可能会有`click`、`mouseover`等事件监听，当用户触发这些事件时，启动或停止图片的滚动。 "jquery-1.3.2.js"是JQuery库的文件，它提供了所有JQuery函数的实现。在项目中引入这个文件，才能使用JQuery提供的...
【文字图片无缝滚动】是一种常见的网页动态效果，用于在有限的空间内展示大量文字或图片，通过不断滚动的方式，使得信息能够连续、平滑地呈现，提高用户体验。在本主题中，我们将深入探讨如何使用JavaScript来实现...
标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片，以滚动的方式呈现，使得用户无需手动翻页就能浏览到...
在网页设计中，图片不间断向左滚动是一种常见的动态效果，常用于展示轮播图或产品展示区域，可以吸引用户注意力并提升用户体验。这种效果通常通过JavaScript实现，因为JavaScript具有强大的DOM操作能力，能够实时...
在这个"jQuery图片左右无缝滚动特效代码"中，我们可以期待以下关键知识点： 1. **jQuery库**：jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个特效利用了jQuery提供的...
根据提供的文件信息，我们可以分析并总结出一个关于“经典向左滚动且停顿代码”的详细知识点解析。 ### 经典向左滚动且停顿代码详解 #### 一、概述 该代码实现了一个基本的HTML页面中的图片轮播效果，图片会按照...
在提供的压缩包“可以左右移动横向无缝滚动的JS图片展示代码”中，包含了实现这些功能的源代码。通过对这些代码的分析和学习，你可以理解并掌握如何利用JavaScript实现横向无缝左右滚动的图片展示效果。在实际应用中...
首先，对于js文字无缝滚动，我们可以创建一个包含所有文字的数组，然后使用定时器每隔一定时间更新DOM中的文本内容，使其看起来像在滚动。例如，可以定义一个函数，该函数负责从数组中获取下一个元素并显示，同时...
文字向左无缝不间断滚动效果，鼠标移上去暂停，移开接着滚动~~兼容各浏览器，页面代码是用div写的
### dede向左滚动代码详解 #### 一、概述 在网页设计中，为了增加页面的动态效果，提升用户体验，滚动展示技术被广泛应用于新闻列表、轮播图、广告推荐等多个场景。本篇文章将深入解析一个名为“dede向左滚动代码...