因需要，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. as3+java+mysql(mybatis) 数据自动工具（六）

    这篇来写一些常量定义的实例.我一般在配置常量的时候,都会让 bitOffset = 20,这样是一个比较好的分配,就是每个分组可以有 0xFFFFF(1048575) 个常量,0xFFF(4095) ...

  2. openvpn文本验证模式配置

    证书模式要为每个客户端生成一个证书,虽说安全性较好,但是比较麻烦,可以配置成用户名/密码的验证模式,这样就比较方便了,我这里用最简单的文本验证模式. 一.安装openvpn 不多说了,之前有篇文章已经 ...

  3. dmesg 信息实时监控其改变

    方法一: 最新的dmesg版本有一个 -w (-w, --follow) 选项,可以实时监控并输出: $ dmesg -wH 方法二: watch -n 0.1 "dmesg | tail ...

  4. Eclipse安装ADT插件

    安卓开发环境搭建,如果选择的是ADT Bundle,则包含了eclipse和adt tools.但是有些时候是在已经独立安装了Eclipse的基础上,在线安装ADT插件,就稍微麻烦了. 一.在线安装A ...

  5. windows环境下mysql忘记密码如何重置

    本文主要是针对mysql重置密码过程中出现“mysqld不是内部命令或外部命令”的问题而写的.网上有很多关于mysql忘记密码了如何找回的文章,但是很多说的都不够详细,特别是还要用到DOS命令,可能这 ...

  6. Oracle-Oracle10 数据空间建立，导入，导出--oracle10g 删除步骤

    --以system/manager身份登录SQLPlus,并执行 ========================管理员登陆==================================== 登 ...

  7. 转载 8天掌握EF的Code First开发之Entity Framework介绍

    转载原地址:  http://www.cnblogs.com/farb/p/IntroductionToEF.html Entity Framework概要 Entity Framework是微软的O ...

  8. Python用特殊符号切割字符串并生成list（简单）

    采用re模块,可以指定字符进行切割,例如切割IP地址: import socket import re localIP = socket.gethostbyname(socket.gethostnam ...

  9. （Map）利用Map，完成下面的功能：  从命令行读入一个字符串，表示一个年份，输出该年的世界杯冠军是哪支球队。如果该 年没有举办世界杯，则输出：没有举办世界杯。  附：世界杯冠军以及对应的夺冠年份，请参考本章附录。 附录 （Map）在原有世界杯Map 的基础上，增加如下功能： 读入一支球队的名字，输出该球队夺冠的年份列表。 例如，读入“巴西”，应当输出 1958 1962 1970 1

    package homework001; import java.util.HashMap; import java.util.Scanner; public class Map { public s ...

  10. 如何使用validate.js进行动态添加和移除表单验证信息

    表单是我们在开当中的常客,那么对表单的验证也是必须的,那么如何实现动态给表单添加验证规则呢? 方法: 1,动态添加验证规则 // 添加$("#addConnectUser").ru ...