因需要，google得到。作者不详。多谢。我这里略作修改。只是改变了ID。

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

特来收藏。

Javascript做图片无缝平滑滚动的更多相关文章

  1. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  2. marquee图片无缝拼接滚动

    marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollL ...

  3. Javascript实现图片无缝滚动

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

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

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

  5. js基础练习---图片无缝左右滚动效果（主要以复制删除为主）

    昨天闲来没事 看了下图片效果  发现这个方法j 就自己模仿下 上代码  当中有很多的纰漏 请大神们多多指教一二? <script type="text/javascript" ...

  6. js特效，轻松实现内容的无缝平滑滚动

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

  7. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  8. 原生javascript实现回到顶部平滑滚动

    function rt() { var d = document, dd = document.documentElement, db = document.body, top = dd.scroll ...

  9. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

随机推荐

  1. 最近升级了一下小老婆（8核 2x8G DDR3 128G SSD）

    晒图(笔者的硬件知识属于小白级别, 且看且参考吧): 另外优化一下休眠&虚拟内存功能节省SSD空间: 1. 台式机, 休眠功能基本没必要, 果断关掉 C:\Windows\system32&g ...

  2. elecworks无法连接至协同服务器

    http://jingyan.baidu.com/article/597a0643759e1c312b524385.html 在安装路径中找到Server文件夹,在文件夹中你可以看到只有一个文件[Ew ...

  3. FreeModbus for stm32（Keil工程）——精简Modbus slave协议【worlsing笔记】

    FreeModbus For stm32:点击下载源码 1.测试环境Keil MDK 4.7a  stm32f103c8, PB12为输出线圈,    可以通过Modbus Poll来控制线圈的输出状 ...

  4. SQL2005查询所有表的大小

    IF NOT EXISTS (SELECT * FROM [tempdb].sys.objects WHERE object_id = OBJECT_ID(N'[tempdb].[dbo].[tabl ...

  5. 偶遇mysql外键不好使

    原来是创建表时选择的类型不一样,应该是innoDB,而且关联的主表类型也必须是innoDB

  6. .NET/C# 类构造函数中this的用法 （转）

    在C#中this用来指代当前对象,用于当成员函数中的形参名跟成员变量名一致时,进行区分. 但this不仅仅只有这一作用,this还可以如下这样用: class class1 { private int ...

  7. Redis实战之征服 Redis + Jedis + Spring （二）

    不得不说,用哈希操作来存对象,有点自讨苦吃! 不过,既然吃了苦,也做个记录,也许以后API升级后,能好用些呢?! 或许,是我的理解不对,没有真正的理解哈希表. 相关链接: Redis实战 Redis实 ...

  8. 使用CATransition实现页面的“从左向右” “从右向左”的动画

    -(void)initView{ UISwipeGestureRecognizer *left_gesture=[[UISwipeGestureRecognizer alloc]initWithTar ...

  9. C++ 构造和析构

    1.继承关系可认为,子类在父类的基础上进行.从这个角度讲,可把它认为穿衣脱衣的过程.穿衣是:先穿内衣,再穿外套.脱衣是:先脱外套,在脱内衣.构造是:先调用父类构造方法,再调用子类构造方法.析构是:先调 ...

  10. 大作业 XXX大学 课程管理系统

    #include<stdio.h> #include<iostream> #include<string.h> #include <fstream> # ...