<marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION="LEFT" scrollamount=3 behavior="scroll" loop="-1" deplay="0">
<table>
<tr>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201204/23143603swol.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201204/23143603swol.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201204/23143603swol.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
</tr>
</table>
</marquee>

以上实现的图片滚动，两轮滚动之间有空白，为解决上面的问题，查找了以下资料。

实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
 
在原作者的基础上做了一定修改，主要还是在样式上面，将表格更换为标签。
 
先了解一下对象的几个的属性：
 
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
 
scrollHeight: 获取对象的滚动高度。
 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
 
scrollWidth:获取对象的滚动宽度
 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
 
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
 
图片上无缝滚动
<style type="text/css"> 
<!-- 
#demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    height: 100px; 
    text-align: center; 
    float: left; 
} 
#demo img { 
    border: 3px solid #F2F2F2; 
    display: block; 
} 
--> 
</style> 
向上滚动 
<div id="demo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
</div> 
<div id="demo2"></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;          //克隆demo1为demo2 
function Marquee(){ 
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 
else{ 
tab.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
--> 
</script>
 
图片下无缝滚动
<style type="text/css"> 
<!-- 
#demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    height: 100px; 
    text-align: center; 
    float: left; 
} 
#demo img { 
    border: 3px solid #F2F2F2; 
    display: block; 
} 
--> 
</style> 
向下滚动 
<div id="demo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
</div> 
<div id="demo2"></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;          //克隆demo1为demo2 
tab.scrollTop=tab.scrollHeight 
function Marquee(){ 
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时 
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端 
else{ 
tab.scrollTop-- 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
--> 
</script>
 
图片左无缝滚动
<style type="text/css"> 
<!-- 
#demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    width: 500px; 
} 
#demo img { 
    border: 3px solid #F2F2F2; 
} 
#indemo { 
    float: left; 
    width: 800%; 
} 
#demo1 { 
    float: left; 
} 
#demo2 { 
    float: left; 
} 
--> 
</style> 
向左滚动 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></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>
 
图片右无缝滚动
<style type="text/css"> 
<!-- 
#demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    width: 500px; 
} 
#demo img { 
    border: 3px solid #F2F2F2; 
} 
#indemo { 
    float: left; 
    width: 800%; 
} 
#demo1 { 
    float: left; 
} 
#demo2 { 
    float: left; 
} 
--> 
</style> 
向右滚动 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></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(tab.scrollLeft<=0) 
tab.scrollLeft+=tab2.offsetWidth 
else{ 
tab.scrollLeft-- 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)}; 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script>
小注：
1. demo的 width: 500px是可以改动的。
2. 图片必须覆盖500px的宽度，即图片的数量要超过一定的数量，否则出不了滚动的效果，或者滚动一会就停止了。

图片左右循环连续滚动代码，解决marquee的留白问题的更多相关文章

  1. marquee上下左右循环无缝滚动代码

    一.横向滚动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "><HTML>< ...

  2. AdapterView 和 RecyclerView 的连续滚动

    AdapterView 和 RecyclerView 的连续滚动 android RecyclerView tutorial 概述 ListView 和 GridView 的实现方式 Recycler ...

  3. JS连续滚动幻灯片：原理与实现

    什么是连续滚动幻灯片?打开一些网站的首页,你会发现有一块这样的区域:一张图片,隔一段时间滑动切换下一张:同时,图片两端各有一个小按钮,供你手动点选下一张:底部有一排小圆圈,供你选定特定的某帧图片.这就 ...

  4. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery 写的图片左右连续滚动

    <style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:# ...

  7. marquee|各种文字滚动代码(适用公告)

    marquee|各种文字滚动代码(适用公告)  

  8. 多行滚动jQuery循环新闻列表代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. HTML网页图片滚动代码

    <!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;height:100;width:90;> < ...

随机推荐

  1. 前后台使用ajax传list的时候，用value[] 获取值

    使用json进行前后台交互的时候,如果穿过来是的是list,可以通过value[index],(index表示的是下标) //加载新闻 function jzxw(){ $.ajax( { type ...

  2. My.Ioc 代码示例——谈一谈如何实现装饰器模式，兼谈如何扩展 My.Ioc

    装饰器模式体现了一种“组合优于继承”的思想.当我们要动态为对象增加新功能时,装饰器模式往往是我们的好帮手. 很多后期出现的 Ioc 容器都为装饰器模式提供了支持,比如说 Autofac.在 My.Io ...

  3. Cocos2d-x3.2总结---使用物理引擎进行碰撞检测

    [转自]: http://blog.csdn.net/cbbbc/article/details/38541099 通常在游戏简单逻辑判断和模拟真实的物理世界时,我们只需要在定时器中判断游戏中各个精灵 ...

  4. hdu 1548 A strange lift (bfs)

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  5. grails-MappingException: Could not determine Type

    在用grails的时候遇到这个问题,反复调试了很久,没有进展,同时敲了几个命令后好了,真纠结,这是框架的问题吗? 问题: Caused by MappingException: Could not d ...

  6. SOLID (面向对象设计) 基本原则

      SOLID (面向对象设计) 基本原则    在 程序设计领域, SOLID (单一功能.开闭原则.里氏替换.接口隔离以及依赖反转)是由罗伯特•C•马丁在21世纪早期[1] 引入的记忆术首字母缩略 ...

  7. (git fetch git push git pull)远程本地分支互相推送更新

    git push origin bug_huiyuan:mobile_attribution 把bug_huiyuan(本地分支) 推送到 远程mobile_attribution分支 git pus ...

  8. Javascript中回调函数的学习笔记

    function a_b(kkis){ document.body.style.background ='red'; kkis(); } function fli(){ alert('######## ...

  9. C语言对数组取地址

    #include <stdio.h> main() { ] = {,,,,}; printf("a=%p\n" , a); printf("a=%p\n&qu ...

  10. 腾讯QQ、新浪微博等知名社交网络图标素材

    腾讯QQ.新浪微博.QQ空间.淘宝.知乎.支付宝.大众点评等设计网络图标矢量素材. 注意是矢量素材,AI格式.放大缩小不变形. 社交网络图标几乎在网页制作中都会用到.一个好看的图标,完全可以提升整体网 ...