<!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. MSP430单片机输入与输出

    MSP430单片机的输入输出线绝大多数是服用的,除了个别的端口外,基本上是8为为一组,不同的型号的MSP430的端口有所不同,就msp430F5438而言,一共有11个I/O端口,其中除了第十一P11 ...

  2. HIbernate学习笔记（六） 关系映射之多对多

    六.多对多 - 单向 Ø        一般的设计中,多对多关联映射,需要一个中间表 Ø        Hibernate会自动生成中间表 Ø        Hibernate使用many-to-ma ...

  3. leetcode@ [62/63] Unique Paths II

    class Solution { public: int uniquePathsWithObstacles(vector<vector<int>>& obstacleG ...

  4. 沈晓军 / LarvaFrame - 代码托管 - 开源中国社区

    沈晓军 / LarvaFrame - 代码托管 - 开源中国社区 统计

  5. 一张图读懂Java多线程

    1.带着疑问看图 1)竞争对象的锁和竞争CPU资源以及竞争被唤醒 2)何种情况下获取到了锁,何种情况下会释放锁 2.还是那张图 3.详细图解 1)Thread t = new Thread(),初始化 ...

  6. python 使用__slots__

    正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: >>> class Studen ...

  7. [一位菜鸟的COCOS-2D编程之路]打飞机中机种敌机和战机损毁时的爆炸效果

    1.第一步,添加爆炸动画 //添加玩家飞机飞行动画 id _playerFlyAction; id _playerBlowupAnimation; //战机爆炸动画 id _enemyBlowupAn ...

  8. SQLite使用教程3 数据类型

    http://www.runoob.com/sqlite/sqlite-data-types.html SQLite 数据类型 SQLite 数据类型是一个用来指定任何对象的数据类型的属性.SQLit ...

  9. 【10】令operator=返回一个reference to *this

    1.令operator= 返回一个reference to *this,为什么? 这只是一个协议,并无强制性.但是,为了与基本类型的行为保持一致性,强烈建议这么做.设计class 有一个宝典:一旦有疑 ...

  10. 【35】考虑virtual方法以外的其他选择

    1.使用Non-Virtual Interface 实现方法模版 将虚方法声明为private,子类重写private的虚方法,在父类中通过public方法调用虚方法.NVI的优点是:可以在虚方法之前 ...