<!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. IT公司的女流之辈

    声明:并不是对女性怎么怎么滴歧视, 我只是想陈述事实. 女性来IT公司工作, 真的适合吗? 如果是杰出女性也就罢了, 如果只是一般女性呢? 她能够像一般男性一样的 努力工作, 像牛马一样的工作? 在某 ...

  2. Cleaver快速制作网页PPT

    原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ 写在开始之前 互联网时代,以浏览器作为入口,已经有越来越多 ...

  3. CI Weekly #6 | 再谈 Docker / CI / CD 实践经验

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  4. express全局安装后无法通过require使用

    今天入门了一下express,首先安装依赖. npm install express -g; npm install body-parser -g; npm install cookie-parser ...

  5. JavaScript权威设计--命名空间，函数，闭包(简要学习笔记十二)

    1.作为命名空间的函数 有时候我们需要声明很多变量.这样的变量会污染全局变量并且可能与别人声明的变量产生冲突. 这时.解决办法是将代码放入一个函数中,然后调用这个函数.这样全局变量就变成了 局部变量. ...

  6. 网络爬虫：使用Scrapy框架编写一个抓取书籍信息的爬虫服务

      上周学习了BeautifulSoup的基础知识并用它完成了一个网络爬虫( 使用Beautiful Soup编写一个爬虫 系列随笔汇总 ), BeautifulSoup是一个非常流行的Python网 ...

  7. [原创]django+ldap实现单点登录(装饰器和缓存)

    前言 参考本系列之前的文章,我们已经搭建了ldap并且可以通过django来操作ldap了,剩下的就是下游系统的接入了,现在的应用场景,我是分了2个层次,第一层次是统一认证,保证各个系统通过ldap来 ...

  8. java占位符应用

    (转载自:http://www.cnblogs.com/happyday56/p/3996498.html) String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语 ...

  9. 做个简单的RSS订阅(ASP.NET Core)，节省自己的时间

    0x01 前言 因为每天上下班路上,午休前,都是看看新闻,但是种类繁多,又要自己找感兴趣的,所以肯定会耗费不少时间. 虽说现在有很多软件也可以订阅一些自己喜欢的新闻,要安装到手机,还是挺麻烦的.所以就 ...

  10. C#基础-MD5验证

    一.前言 MD5验证主要用于更新文件功能方面,服务器告知客户端要下载哪些更新文件并提供给客户端其MD5值,客户端从服务器将更新文件下载到本地并计算下载文件的MD5值,将本地接收的MD5值与服务器提供的 ...