因需要，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. <转>SpringMVC与Struts2 比较总结

    原链接:http://blog.csdn.net/chenleixing/article/details/44570681 个人整理: 1.级别不同:SpringMVC :方法  Struts是 类级 ...

  2. 【译】 AWK教程指南 1前言

    前面的话: 这几天写了一个程序,在同一个目录里生成了很多文件,需要统计其中部分文件的总大小,发现经常用到的ls.du等命令都无济于事,我甚至都想到了最笨的方法,写一个脚本:mkdir一个新目录,把要统 ...

  3. 有关按位DP

    这是一道正式比赛的题目 数据范围是 10^999 ~ 10^1000 的两个整数以及一个k我记得好像是不超过100,计算两个数中间有多少个每一位相乘最后和k取摸等于0的数.这道题对于不会按位dp的人是 ...

  4. 洛谷 P2279 03湖南 消防局的设立

    2016-05-30 16:18:17 题目链接: 洛谷 P2279 03湖南 消防局的设立 题目大意: 给定一棵树,选定一个节点的集合,使得所有点都与集合中的点的距离在2以内 解法1: 贪心 首先D ...

  5. EM算法原理简析——图解

    一. 扯淡 转眼间毕业快一年了,这期间混了两份工作,从游戏开发到算法.感觉自己还是喜欢算法,可能是大学混了几年算法吧!所以不想浪费基础... 我是个懒得写博客的人,混了几年coding,写的博客不超过 ...

  6. ubuntu免验证登陆权限问题

    由于经常ssh到服务器,每次输入密码很烦.就传了本机公钥到服务器. 和所有教程将的一样,做起来挺简单的. 本机ssh-keygen -t rsa生成公钥和密钥. 将公钥传至服务器,用户目录下.ssh/ ...

  7. CentOS安装Redis Sentinel HA集群

    安装了很多次,但是每次安装还要翻以前的配置,故列文备忘.下文依赖于2.x版本搭建主从节点实现基于sentinel机制的简单Redis HA(相对高可用Redis集群,真正高可用还要等3.0之后版本). ...

  8. delphi 调用 webservice (.NET C#版)

    uses XMLIntf, XMLDoc; XML to XTR文件转换 .File-->open打开你要分析的XML文件 .在左边选择你要分析的接点,双击加到中间的转换列表中 .Create- ...

  9. Qt on_pushButton_clicked()的用法【worldsing笔记】

    在Qt里按钮控件默认对应一个on_pushButton_clicked()成员,如果想用点击信号,在代码中实现on_pushButton_clicked()成员即可. 最近看了一段代码,里面并没有co ...

  10. Linux就是这个范儿之第一次亲密接触(3)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.4 返璞归真的命令行 有一种说法,现代计算机不是靠电力驱动,而是靠“鼠标”.多少应用程序的界面需 ...