<!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. HTML5 标签 details 展开 搜索

    details有一个新增加的子标签--summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. 默认状态为 收缩状态 设置为展开状态为 <d ...

  2. 腾讯云上免费部署HTTPS

    接上篇<腾讯云下安装 nodejs + 实现 Nginx 反向代理>,想从头一步到位的同学建议从上篇文章开始阅读.本文将继续介绍如何通过 Nginx 免费部署HTTPS. 留意下,这里的“ ...

  3. Enterprise Integration Pattern - 组成简介

    近些年来,越来越多的Web应用正在逐渐向大型化的方向发展.它们通常都会包含一系列相互协作的子服务.在开发过程中,如何让这些子服务协同工作常常是软件开发人员所最为头疼的问题,如各个子服务之间的数据表示不 ...

  4. 曲演杂坛--蛋疼的ROW_NUMBER函数

    使用ROW_NUMBER来分页几乎是家喻户晓的东东了,而且这东西简单易用,简直就是程序员居家必备之杀器,然而ROW_NUMBER也不是一招吃遍天下鲜的无敌BUG般存在,最近就遇到几个小问题,拿出来供大 ...

  5. ABP源码分析四十四：ZERO的配置

    ABP Zero模块中需要配置的地方主要集中在三块:配置静态的role,配置外部认证源,以及配置本地化语言和资源. UserManagementConfig/IUserManagementConfig ...

  6. ASP.NET MVC中利用AuthorizeAttribute实现访问身份是否合法以及Cookie过期问题的处理

    话说来到上海已经快半年了,时光如白驹过隙,稍微不注意,时间就溜走了,倒是没有那么忙碌,闲暇之际来博客园还是比较多的,记得上次在逛博问的时候看到有同志在问MVC中Cookie过期后如何作相关处理,他在阐 ...

  7. GroupData群数据库的还原与优化

    一.背景 这个数据库的数据文件mdf大概有83G左右,当还原数据库之后感觉可以做很多性能方面上的调优,合并数据后mdf数据文件大概有59G左右,行压缩后mdf数据文件大概有39G左右,页压缩后mdf数 ...

  8. Log4net入门（SQL篇）

    我们在Log4net入门(回滚日志篇)中详细讲述了如何将日志信息输出到日志文件中,在这一篇中,我们将讲述如何将日志文件写入SQL Server数据库,以方便我们分析统计日志信息. 首先,我们在SQL ...

  9. 多线程条件通行工具——Semaphore

    Semaphore的作用是,限制线程通行的数量,如果线程进入时达到通行数量,便等待其它正在通行的线程释放. acquire()获取通行 release()释放通行 availablePermits() ...

  10. u-boot-2015.04 在tq2440上的移植（使用spl引导u-boot）

    本次移植跟以往的不同之处是采用了spl来引导u-boot,参考了博客http://blog.csdn.net/fulinus/article/details/42738641 下载链接:http:// ...