<!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. WebAPI 2.x中如何扩展Identity Store

    ASP.NET WebAPI 中引入了新的一套身份验证和授权的机制,官方的叫法是ASP.NET Identity,有关这个概念的细节,感兴趣的同学可以参考 http://www.asp.net/ide ...

  2. [Python] py2exe先知其然

    #Hello.py import Tkinter root=Tkinter.Tk() label=Tkinter.Label(root,text="Hello,py2exe!") ...

  3. 基于jQuery的一个简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

  4. 【Linux驱动】内核等待队列

    在Linux中, 一个等待队列由一个"等待队列头"来管理,等待队列是双向链表结构. 应用场合:将等待同一资源的进程挂在同一个等待队列中. 数据结构 在include/linux/w ...

  5. EF总结

    1.Entity Framework 查询历史最严重bug求解十万火急 2.http://www.cnblogs.com/badly1984/p/3203565.html 3.Entity Frame ...

  6. SQL Server时间粒度系列----第1节时间粒度概述

    本文目录列表: 1.什么是时间粒度?2.SQL Server提供的时间粒度3.SQL Server时间粒度代码演示   4.SQL Server基准日期 5.总结语6.参考清单列表   什么是时间粒度 ...

  7. Web API 自动生成帮助文档并使用Web API Test Client 测试

    之前在项目中有用到webapi对外提供接口,发现在项目中有根据webapi的方法和注释自动生成帮助文档,还可以测试webapi方法,功能很是强大,现拿出来与大家分享一下. 先看一下生成的webapi文 ...

  8. LINQ的Intersect方法

    找到两个集合中交集部分: source code: IEnumerable<int> a = new List<int>{ { }, { }, { } }; IEnumerab ...

  9. SSH实例(1)

    首先,配置struts.xml文件: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE st ...

  10. 用Supervisord管理Python进程

    http://feilong.me/2011/03/monitor-processes-with-supervisord Supervisord是用Python实现的一款非常实用的进程管理工具,类似于 ...