<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无缝滚动</title>

    <style>

    #warp{

        width: 1200px;

        height: 300px;

        overflow: hidden;

        margin:100px auto 0;

    }

    #warp #con{

        width: 4000px;

        height: 300px;

        overflow: hidden;

    }

    #warp #con #box1{

         float: left;

         overflow: hidden;

    }

    #warp #con #box2{

         float: left;

         overflow: hidden;

    }

    #warp img{

        float: left;

        width: 200px;

        height: 300px;

    }

    </style>

</head>

<body>

    <div id="warp">

        <div id="con">

            <div id="box1">

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

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

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

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

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

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

            </div>

            <div id="box2"></div>

        </div>

    </div>

    <script>

        var warp=document.getElementById('warp');

        var con=document.getElementById('con');

        var box1=document.getElementById('box1');

        var box2=document.getElementById('box2');

        // box2.innerHTML=box1.innerHTML;

        var timer1=null,x=0;

        function scroll(){//滚动函数

        box2.innerHTML=box1.innerHTML;

        timer1=setInterval(function(){

            x++;

            if (x>=box1.clientWidth) {

                x=0;

                warp.scrollLeft=x;

            }

            warp.scrollLeft=x;

        },10)

        }

        scroll();

        warp.onmouseenter=function(){

            clearInterval(timer1);

        }

        warp.onmouseleave=function(){

            scroll();

        }

    </script>

</body>

</html>

这种效果的主要思想是图片内容部分的宽度要远远大于要展示区域的宽度，使其出现滚动条。复制上一组图片的内容使其在效果上实现无缝滚动，具体的请大家参考代码。

js实现标准无缝滚动的更多相关文章

  1. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

  3. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  4. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  5. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  6. js实现表格无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。

    一:html部分 <body> <input id="btn1" type="button" value="向左"> ...

  8. 用JS写的无缝滚动特效

    代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  9. js 图片实现无缝滚动

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

随机推荐

  1. [c++] STL = Standard Template Library

    How many people give up, because of YOU. Continue... 先实践,最后需要总结. 1. 数据流中的数据按照一定的格式<T>提取 ------ ...

  2. 一套后台管理html模版

    最近自己需要一套后台管理的模版,然后去网上查找,模版的确很多,但是适合我的并不多.我需要的模版是不会很大,我能够控制代码,样式不要太古朴,最好有点CSS3的效果.最后终于找到一张主页,然后再根据这个主 ...

  3. 吐槽坑爹的微软win store app审核

    从学习win store app 开发到做出第一个应用 博客园cnblogs 花了一个多月的全部业余和上班空闲时间, 上周在端午节放假期间终于完成了计划的全部开发和测试, 6月10号怀着无比激动的心情 ...

  4. QT学习笔记1

    不准备用MFC了,想切换到QT.所以跟着网上的一个笔记学习. 1 开发环境是VS2008+QT4.7+VassistX 具体如何配置看这个帖子:http://qimo601.iteye.com/blo ...

  5. 第2/24周 页_SQL Server 中数据存储的基本单位

    上周通过探讨SQL Server如何执行一个查询奠定了基础.我也在那里提到页是8kb的缓存.今天我们对页进行进一步集中探讨,从性能调优角度挖掘出更多的细节. 页是SQL Server的基础,在SQL ...

  6. cdh完美集成kafka

    前言 其实cloudera已经做了这个事了,只是把kafka的包和cdh的parcel包分离了,只要我们把分离开的kafka的服务描述jar包和服务parcel包下载了,就可以实现完美集成了. 具体实 ...

  7. js 模块化历程

    作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生 ...

  8. ASP.NET Core 开发-缓存(Caching)

    ASP.NET Core 缓存Caching,.NET Core 中为我们提供了Caching 的组件. 目前Caching 组件提供了三种存储方式. Memory Redis SqlServer 学 ...

  9. 奔跑的歌颂 diskgenius 找回了20G数据

    2.0同学家的电脑不慎重装系统,结果默认重新分区.其他倒没什么数据,就是几千张记录孩子成长的照片最为珍贵.为了找回数据,用U盘启动,使用Diskgenius全部找回,在此奔歌一下.

  10. 【开源】Ionic项目实例《Ionic中文社区》

    介绍 这几天闲着没事,就做了个第三方的Ionic社区的移动客户端,练练手,界面设计和图片资源直接从官方版拿来的.真懒o(︶︿︶)o 唉 网站开放出来的接口,都已全部实现,大家可以下着试试看. 源码 h ...