<!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. 关于未捕获异常的处理(WPF)

    这一篇文章来谈谈对于WPF应用程序开发中的未捕获异常的处理. 首先,我们当然是要求应用程序开发人员,尽可能地在程序可能出现异常的地方都去捕捉异常,使用try-catch的方式.但是总是有一些意外的情况 ...

  2. Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案

    Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案,ext 的CheckboxSelectionModel在后台默认选中之后,前台就不允许编辑的bug是存 ...

  3. 把《c++ primer》读薄（1-2前言+变量和基本类型）

    督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. 一:大小端的概念 Big-Endian和Little-Endian(见计算机存储的大小端模式解析) 二:浮点数的机器级表示 (见 ...

  4. Web性能测试参数

    1.前言 最近在项目中引入了keyless,需要测试一下对web的性能影响.常见的web测试工具有ab.siege.http_load等.我用的是Apache的ab测试工具.在测试web性能之前,首先 ...

  5. Theano入门神经网络(三)

    附录一个:Keras学习随笔 http://blog.csdn.net/niuwei22007/article/details/49045909 参考 <Python Machine Learn ...

  6. js、jquery验证时间格式

    下面验证的格式是2012-2-1 或2010-02-01 var reDate = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12 ...

  7. ASP.NET 的IP帮助类

    个人网站地址: https://www.lesg.cn/netdaima/net/2016-239.html ASP.NET 的IP帮助类 在Web开发中会出现需要调用客户IP的方法: 一般调用方法就 ...

  8. bootstrap学习笔记系列4------bootstrap按钮

    按钮标签 在<a>,<button>或input元素上使用按钮class.但是为了避免跨浏览器的不一致性,建议使用<button>标签. <!DOCTYPE ...

  9. c#通过oledb获取excel文件表结构信息

    这个问题来自论坛提问,同理可以获得access等数据库的表结构信息. using System; namespace ConsoleApplication11 { class Program { pu ...

  10. iOS 阶段学习第25天笔记（iOS沙盒机制介绍）

    iOS学习(OC语言)知识点整理 一.iOS沙盒机制介绍 1)概念: 每个ios应用都有自己的应用沙盒,应用沙盒就是文件系统目录,与其他应用放入文件 系统隔离,ios系统不允许访问 其他应用的应用沙盒 ...