<!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. <转>SpringMVC与Struts2 比较总结

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

  2. 题解西电OJ (Problem 1007 -做一名正气的西电人 )--长整型计算

    Description 一天,wm和zyf想比比谁比较正气,但正气这种东西无法量化难以比较,为此,他们想出了一个方法,两人各写一个数字,然后转化为二进制,谁的数字中二进制1多谁就比较正气! Input ...

  3. Petshop学习第二天

    数据访问层的数据访问设计 1.数据层的内容: 数据库访问.Messaging.membership.Profile四部分 2.数据库对象的分类: 一类:数据实体,对应数据库中相应的数据表,它们作为数据 ...

  4. build-your-first-mobile-app（第一个 PhoneGap cordova Coldfusion App）

    摘自:http://www.adobe.com/devnet/coldfusion/articles/build-your-first-mobile-app.html Introduction Use ...

  5. maven 名词

    maven 坐标: 坐标 其实就是 通过几种不同的元素描述来找到其对应的构件. maven 定义坐标的元素有: 1. groupId : 定义当前maven 项目隶属的实际项目,一般是域名的反向写法 ...

  6. Aisino 金税盘 pass throught

  7. POJ3468--A Simple Problem with Integers（Splay Tree）

    虽然有点难,但是这套题都挂了一个月了啊喂…… 网上模板好多……最后还是抄了kuangbin聚聚的,毕竟好多模板都是抄他的,比较习惯…… POJ 3468 题意:给n个数,两种操作,区间整体加一个数,或 ...

  8. EDM

    今天,夏令营需要发推广EDM. 之前的edm都是文字版, 今天摸索了一下,简单写了些码, 效果还不错. 演示:http://baike.baidu.com/cms/s/bkcampus/summerc ...

  9. Delphi 调用netsh命令修改IP地址

    Delphi 调用netsh命令修改IP地址 先介绍一下Netsh命令的使用方法: 在这里跟大家介绍几个简单的指令 1.Show IP 1.1Cmd Mode 直接在cmd下面输入 netsh int ...

  10. MBProgressHUD not showing

    In my app, I am loading a resource heavy view that takes about 1 to 2 seconds to load. So I am loadi ...