<!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">

body,html,div,a{ margin:0 auto; padding:0}

#scroll_top {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 98%;

}

#scroll_top img {

border: 3px solid #F2F2F2;

}

#scroll_main {

float: left;

width: 800%;

}

#scroll1 {

float: left;

}

#scrol2 {

float: left;

margin-left:7px;

}

</style>

<script type="text/javascript">

window.onload = function(){

var speed=50;var tab=document.getElementById("scroll_top");

var tab1=document.getElementById("scroll1");

var tab2=document.getElementById("scrol2");

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>

</head>

<body> 

<div id="scroll_top">

<div id="scroll_main">

<div id="scroll1">

<img src="http://www.google.com/images/errors/robot.png" alt="404" />

<img src="http://www.google.com/images/errors/robot.png" alt="404" />

<img src="http://www.google.com/images/errors/robot.png" alt="404" />

<img src="http://www.google.com/images/errors/robot.png" alt="404" />

<img src="http://www.google.com/images/errors/robot.png" alt="404" />

<img src="http://www.google.com/images/errors/robot.png" alt="404" />

<img src="http://www.google.com/images/errors/robot.png" alt="404" />

</div>

<div id="scrol2" ></div>

</div>

</div>

</body>

</html>

　　上面還有一篇是用jquery做的圖片無縫滾動。http://www.cnblogs.com/dying/p/3394529.html

Javascript实现图片无缝滚动的更多相关文章

  1. javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

    <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...

  2. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  3. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  4. jQuery图片无缝滚动JS代码ul/li结构

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

  5. jQuery图片无缝滚动

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

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

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

  7. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  8. 原生javascript效果：无缝滚动

    <style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...

  9. Javascript做图片无缝平滑滚动

    因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. flappy pig小游戏源码分析(3)——解剖util

    这一节我们继续高歌猛进,如果对源码中有无论无何都理解不通的问题,欢迎和我交流,让我也学习一下,我的qq是372402487. 还是按照惯例看看我们的目录结构. 我们在前两节中已经分析了game.js, ...

  2. Linux下安装memcache

    1.Memcache用到了libevent(这个库用于Socket的处理),需要安装libevent: (1)tar zxvf libevent.tar.gz 后进入解压后的文件夹 (2)./conf ...

  3. 关于ANSI 和 Unicode

    关于ANSI和Unicode 1.ANSI American National Standards Institute(美国国家标准学会),ANSI编码不是一种具体的编码方式,而是一种指定在某些环境下 ...

  4. [Objective-c 基础 - 3.1] 内存管理

    A.内存存放.retain.release 1.栈内存:存放局部变量,运行超过变量作用域自后编译器自动回收 2.堆内存:存放对象(地址,对象实体) 3.对象的基本结构 (1)引用计数器(4字节):当计 ...

  5. 《数据通信与网络》笔记--QoS

    QoS(Quality of Service)服务质量,是网络的一种安全机制, 是用来解决网络延迟和阻塞等问题的一种技术. 1.QoS参数 衡量服务质量QoS的参数主要包括: 端到端延迟(Delay) ...

  6. 【Stage3D学习笔记续】真正的3D世界（二）：显示模型

    虽然我们进入真3D世界了,但是上一章的Demo仍然是显示的一个平面,尽管我们的平面在3D空间中旋转可以看出一点3D透视的效果,但是既然是真3D,就要拿出点3D的样子来! 如果要显示3D模型,我们就要告 ...

  7. Android自定义下拉刷新

    网上的下拉刷新功能很多,不过基本上都是隐藏header的,而项目里面需要只隐藏部分的header,类似QQ好友动态的效果,修改了一些现有的,最后有很多问题,所以就自己自定义了一个,逻辑也很简单,首先就 ...

  8. 对<< ubuntu 12.04编译安装linux-3.6.10内核笔记>>的修正

    前题: 在前几个月的时候,写了一篇笔记,说的是kernel compile的事情,当时经验不足,虽说编译过了,但有些地方写的有错误--因为当时的理解是有错误的.今天一一更正,记录如下: 前文笔记链接: ...

  9. Oracle12c功能增强 新特性之管理功能的增强

    1.    数据文件在线重命名和迁移 不想先前的版本号.在Oracle12cR1中,数据文件的迁移或重命名不再要求一系列的步骤,比如:将表空间至于仅仅读模式,然后数据文件逻辑等操作.在12cR1中.数 ...

  10. node.js在windows下的学习笔记(4)---同步，异步，回调的概念

    Node.js是使用事件驱动的,非阻塞的I/O模型,用于构建快速的,可扩展的网络应用程序. Node.js想解决的问题是:处理输入,输入,高并发 1.阻塞与非阻塞 阻塞也叫同步,是指每一次执行一个操作 ...