<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. Swift内存管理、weak和unowned以及两者区别

    Swift 是自动管理内存的,这也就是说,我们不再需要操心内存的申请和分配.当我们通过初始化创建一个对象时,Swift 会替我们管理和分配内存.而释放的原则遵循了自动引用计数 (ARC) 的规则:当一 ...

  2. Linux软件安装-RPM安装

    RPM是RPM Package Manager(RPM软件包管理器)的缩写,这一文件格式名称虽然打上了RedHat的标志,但是其原始设计理念是开放式的,现在包括OpenLinux.         S ...

  3. 查看linux系统,服务,配置文件被修改的时间

    如何查看服务启动时间 [root@qike /]# ps -ef |grep nginx root 14730 1 0 16:45 ? 00:00:00 nginx: master process / ...

  4. 【4412嵌入式开发板学习笔记】认识uboot

    转自迅为讨论群:http://www.topeetboard.com 重要说明:这份笔记不是4412开发配套的,是我在网上看视频的时候下载上课老师的笔记后修改的.所以我试了一下笔记上的uboot命令, ...

  5. 理解 OpenStack + Ceph (5):OpenStack 与 Ceph 之间的集成 [OpenStack Integration with Ceph]

    理解 OpenStack + Ceph 系列文章: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 (5)Ceph 与 OpenS ...

  6. [转]ASP.NET MVC4+BootStrap 实战(一)

    本文转自:http://leelei.blog.51cto.com/856755/1587301 好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没 ...

  7. SoapUI调用webservice实现的两种方式

    SoapUI用来做测试,已经是很多人做过的事情了,而且网上教程也很多.不过还是写下来,对比webservice协议与http协议脚本编写的不同. 首先测接口得有一个服务,刚好笔者所在项目做ESB集成. ...

  8. 阻塞通信之Socket编程

    Socket通信,主要是基于TCP协议的通信.本文从Socket通信(代码实现).多线程并发.以及TCP协议相关原理方面 介绍 阻塞Socket通信一些知识. 本文从服务器端的视角,以“Echo Se ...

  9. [每日菜单]lunch menu for Wednesday, February 24 2016

    HIGHLIGHTS ​** Boiled Broccoli原味西兰花  ​ Steamed Turbot with Chili剁椒蒸多宝鱼  ​* Rye Bread黑麦面包  CHINESE CU ...

  10. codeforces 732

    A. Buy a Shovel time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...