<div id="demo">
<div id="innerdemo">
<div id="demo1">
<img src="data:images/0.jpg" />
<img src="data:images/1.jpg" />
<img src="data:images/2.jpg" />
<img src="data:images/3.jpg" />
<img src="data:images/4.jpg" />
<img src="data:images/5.jpg" />
</div>
<div id="demo2"></div>
</div>
</div>
#demo{ width:600px; height:200px; border:1px solid #CCC; margin:20px auto; overflow:hidden;}
#innerdemo{ width:800%; }
#demo1,#demo2{float:left;}
function crossMarquee(){
var speed=10;
var oDemo=document.getElementById("demo");
var oinnerDemo=document.getElementById("innerdemo");
var oDemo1=document.getElementById("demo1");
var oDemo2=document.getElementById("demo2");
oDemo2.innerHTML=oDemo1.innerHTML;
function Marquee(){
if(oDemo1.offsetWidth<=oDemo.scrollLeft){
oDemo.scrollLeft-=oDemo1.offsetWidth;
}else{
oDemo.scrollLeft++;
}
}
var myMar=setInterval(Marquee,speed);
oDemo.onmouseover=function(){clearInterval(myMar);}
oDemo.onmouseout=function(){myMar=setInterval(Marquee,speed);}
}
window.onload=function(){
crossMarquee() };

这是一个简单的js无缝滚动代码,有个需要注意的地方

1、scrollLeft必须在最外层容器上执行

2、scrollLeft无需加单位px

scrollLeft的相关问题(js横向无缝滚动)的更多相关文章

  1. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  2. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

  3. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  4. JS 实现无缝滚动动画原理(初学者入)

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  5. JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  6. marquee横向无缝滚动无js

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...

  7. CSS3+HTML5特效4 - 横向无缝滚动

    先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This ...

  8. js 图片无缝滚动

    html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...

  9. JS实现无缝滚动

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. linux关于文件的那些事儿

    一个文件的权限对于系统的安全来说是很重要的,linux是一个支持多任务多用户的系统,我们都不希望一些自己的文件被别人看到或者修改! 对于一个文件的权限我们可以用 ls -l 命令来查看,例如: [ro ...

  2. iTOP-4412嵌入式开发板ioremap控制GPIO寄存器

    转自迅为电子技术论坛:http://bbs.topeetboard.com GPIO 的寄存器通过 ioremap函数转换之后,可以通过直接控制虚拟地址来控制物理地址(寄存器的实际地址),这样就实现 ...

  3. 谁在死锁Mutex——用Windbg查找Mutex死锁所有者线程

    Who is blocking that Mutex? - Fun with WinDbg, CDB and KD 05 Aug 2006 By Ingo Rammer I'm currently t ...

  4. AI (Adobe Illustrator)详细用法(二)

    本文主要是介绍形状的创建与编辑. 一.系列形状工具 1.矩形工具 矩形的作用很大,比如输入框,按钮,图片的大小,比如相片应用中每一个照片占的比例是多大. 初步的UI图的话,会画矩形和圆角矩形就够了. ...

  5. C++/C#互调步骤

    一.C#调用C++ dll步骤(只能导出方法):  * 1. c++建立空项目->源文件文件夹中添加cpp文件和函数  * 2. c++属性设置中,配置类型设置为动态库dll,公共语言运行时支持 ...

  6. qau-国庆七天乐——B

      B - Bull Math   Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Sub ...

  7. SWT使用注意点

    出现这个错: java.lang.UnsatisfiedLinkError: no swt-win32-3139 in java.library.path 解决方法: 将swt-win32-3139导 ...

  8. [No00004F]史上最全Vim快捷键键位图(入门到进阶)

    史上最全Vim快捷键键位重磅来袭!!学习Linux的朋友看过来啦,你是不是觉得Linux编辑器Vim操作复杂,步骤繁琐呢?Linux工程师是不是想大幅度提升自己的工作效率呢? 经典版        下 ...

  9. Android RecyclerView 动画展开item显示详情

    stackoverflow上看到这个问题,答主给了个demo http://stackoverflow.com/questions/27446051/recyclerview-animate-item ...

  10. PAT 1027. 打印沙漏(20)

    本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * *** ***** 所谓"沙漏形状",是指每行 ...