<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无缝滚动</title>

</head>

<style type="text/css">

    .row{

        width: 1298px;

        height: 400px;

        border: 1px solid;

        box-shadow:2px 2px 2px #000;

        overflow: hidden;

    }

    .box{

        position: relative;

    }

    .box1,.box2{

        width: 1298px;

        position: absolute;

    }

    .box2{

        left:1298px;

    }

    img{

        float: left;

    }

</style>

<body>

    <div class="row">

        <div class="box" id="box">

            <div class="box1" id="box1">

                <img src="data:images/1.jpg">

                <img src="data:images/2.jpg">

                <img src="data:images/3.jpg">

                <img src="data:images/4.jpg">

                <img src="data:images/5.jpg">

            </div>

            <div class="box2" id="box2">

                <img src="data:images/1.jpg">

                <img src="data:images/2.jpg">

                <img src="data:images/3.jpg">

                <img src="data:images/4.jpg">

                <img src="data:images/5.jpg">

            </div>

        </div>

    </div>

</body>

<script type="text/javascript">

    window.onload = function(){

        var _box1 = document.getElementById("box1");

        var _box2 = document.getElementById("box2");

        var x = 0;

        var fun = function(){

            _box1.style.left = x + 'px';

            _box2.style.left = (x +1298) + 'px';

            x--;

            if((x +1298) == 0){

                x = 0;

            }

        }

        setInterval(fun,1);

    }

</script>

</html>

图片格式：260*400.

使用循环定时器轻松实现。

js实现无缝循环滚动的更多相关文章

  1. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

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

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

  3. js 图片无缝循环

    <html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> ...

  4. Swift - 多层无缝循环滚动背景（SpriteKit游戏开发）

    在游戏开发中,比如跑酷游戏.我们需要实现背景的无限循环滚动,来营造运动的效果.除了单层的背景滚动,还有视差滚动. 视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验. ...

  5. JS实例——间歇循环滚动

    间歇滚动:滚动一行后,延迟2秒后继续滚动 具体实现代码如下: <!doctype html> <html lang="en"> <head> & ...

  6. table表格数据无缝循环滚动

    分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox">              ...

  7. cocos2d JS 设置字幕循环滚动(背景图滚动亦可)

    var dong = ccs.load("res/Login.json"); this.addChild(dong.node); this.cShamNotice = ccui.h ...

  8. DIV+javascript实现首尾相连循环滚动效果

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

  9. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

随机推荐

  1. Create a bridge using a tagged vlan (8021.q) interface

    SOLUTION VERIFIED April 27 2013 KB26727 Environment Red Hat Enterprise Linux 5 Red Hat Enterprise Li ...

  2. Linux的locale、LC_ALL和LANG

    如果你是一个Linux新手,并且刚刚安装了一个新的英文系统但想要设置成中文系统,肯定会接触到上面几个变量,在网上搜索了一系列解决方法,给一些变量赋一下值,再export一下,或者写到配置文件里面,然后 ...

  3. oracle 存储过程

    来自:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 I ...

  4. Membership三步曲之入门篇 - Membership基础示例

    Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 -  Membership基础示例 Membership三步曲之进阶篇 -  深入剖析Pro ...

  5. Bellman-Ford 单源最短路径算法

    Bellman-Ford 算法是一种用于计算带权有向图中单源最短路径(SSSP:Single-Source Shortest Path)的算法.该算法由 Richard Bellman 和 Leste ...

  6. "用户增长"--快速身份认证实现用户增长的技术和产品方案

    "用户增长"--快速身份认证实现用户增长的技术和产品方案 1   引言 作为一个互联网产品,用户量的增长是一个非常重要的衡量指标. 这是一个集合了销售,市场,运营,技术的综合能力. ...

  7. Thinking in Unity3D：材质系统概览

    关于<Thinking in Unity3D> 笔者在研究和使用Unity3D的过程中,获得了一些Unity3D方面的信息,同时也感叹Unity3D设计之精妙.不得不说,笔者最近几年的引擎 ...

  8. 总结项目开发中用到的一些css\html技巧

    这篇就是用来总结记录的,会长期更新. 1,半透明背景效果(#ffffff颜色的半透明背景): font-style: italic;">#ffffff; filter:alpha(op ...

  9. 浅析Java 泛型

    泛型是JavaSE5引入的一个新概念,但是这个概念在编程语言中却是很普遍的一个概念.下面,根据以下内容,我们总结下在Java中使用泛型. 泛型使用的意义 什么是泛型 泛型类 泛型方法 泛型接口 泛型擦 ...

  10. 解析大型.NET ERP系统 界面与逻辑分离

    Windows Forms程序实现界面与逻辑分离的关键是数据绑定技术(Data Binding),这与微软推出的ASP.NET MVC的原理相同,分离业务代码与界面层,提高系统的可维护性. 数据绑定 ...