<!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. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  2. swift学习之一致性hash

    转自:http://blog.csdn.net/cywosp/article/details/23397179 一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标 ...

  3. 【Kafka入门】Kafka基础结构和知识

    基本概念的总结 在基本的Kafka架构中,producer将消息发布到Kafka话题中,一个Kafka话题通常指消息的类别或者名称,Kafka话题被集群中一个充当Kafka server角色的 bro ...

  4. [读书笔记]了不起的node.js(四)

    这周的学习主要是nodejs的数据库交互上,并使用jade模板一起做了一个用户验证的网站.主要是遇到了一下几个问题. 1.mongodb版本过低 npm ERR! Not compatible wit ...

  5. POJ3666-Making the Grade（左偏树 or DP）

    左偏树 炒鸡棒的论文<左偏树的特点及其应用> 虽然题目要求比论文多了一个条件,但是……只需要求非递减就可以AC……数据好弱…… 虽然还没想明白为什么,但是应该觉得应该是这样——求非递减用大 ...

  6. cache 的简单认识与思考

    之前对NOSQL的总结是:基本功能是key-value, 然后各自附加特殊功能. 现在简单的来认识一下cache. 背景 大家都知道NoSQL, 大多数都是 key-value 型的数据库.有些内存型 ...

  7. [iOS基础控件 - 4.6] iOS开发中的长度单位

    对于开发中设置的位置.尺寸单位 系统会根据屏幕的性质转换为像素单位 由于视网膜屏在同样尺寸下分辨率是非视网膜屏的两倍,所以 非视网膜屏:1个单位 = 1像素 视网膜屏:1个单位 = 2像素   应对非 ...

  8. 针对 .NET 框架的安全编码指南

      此主题尚未评级 - 评价此主题 发布日期 : 10/9/2004 | 更新日期 : 10/9/2004 Microsoft Corporation 适用于: Microsoft .NET 框架 摘 ...

  9. 关于iOS中SQLITE句柄的使用的细节

    1.设计思想:给SQLITE进行封装,利用定义的类别实现方法的简洁,以便达到低耦合效果 控制器代码: #import "ViewController.h" #import &quo ...

  10. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...