思路：

赋值所有li，添加到ul末尾,重新计算ul宽度

每次移动一个固定的值，当超出一半时，将ul拉回原位

以下代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>无缝滚动</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            img{

                display: block;

            }

            ul,li{

                list-style: none;

            }

            #box{

                width: 440px;

                height: 88px;

                margin: 50px auto;

                border: 3px solid #DCDCDC;

                position: relative;

                overflow: hidden;

            }

            #list{

                position: absolute;

            }

            #list li{

                float: left;

                width: 88px;

                height: 88px;

            }

        </style>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <script type="text/javascript">

            $(function(){

                //将ul的内容复制一遍添加到ul中，

                $('#list').append($('#list').html());

                //改变list的长度

                $('#list').width($('#list li').eq(0).width() * $('#list li').length)

                setInterval(move,10)

            })

            var x = 0; //每次移动的长度

            function move(){

                //判读超过ul的一半，拉回来重新开始

                if(x <= -($('#list').width()/2)){

                    x = 0;

                }

                $('#list').css('left',x)

                x-=1;

            }

        </script>

    </head>

    <body>

        <div id="box">

            <ul id="list">

                <li><img src="img/1.jpg" alt="" /></li>

                <li><img src="img/2.jpg" alt="" /></li>

                <li><img src="img/3.jpg" alt="" /></li>

                <li><img src="img/4.jpg" alt="" /></li>

                <li><img src="img/5.jpg" alt="" /></li>

            </ul>

        </div>

    </body>

</html>

jQery无缝滚动效果的更多相关文章

  1. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  2. js实现简单易用的上下无缝滚动效果

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

  3. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  4. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  5. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  6. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  8. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  9. vue实现消息的无缝滚动效果

    export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...

随机推荐

  1. JSF 2 panelGrid example

    In JSF , "h:panelGrid" tag is used to generate HTML table tags to place JSF components in ...

  2. Firefox常用插件

    一.Web浏览使用插件 1.Adblock Plus广告拦截插件:能够自动拦截很多弹出广告,同时支持右键拦截指定信息 2.惠惠购物助手支持各大购物网站商品实时价格比较,非常棒的网站购物利器,插件下载地 ...

  3. keycode按键对照表

    功能场景,鼠标在某区域内,比如多个条件的搜索框内,按下enter键让其具有,点击 [确定/搜索]按钮的功能.在编辑的区域内,点击enter键,让其有 [保存]按钮的功能.则可这样:$("#s ...

  4. 创建类模式（五）：单例（Singleton）

    定义 确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式一般情况下通过使用private的构造函数确保了在一个应用中只产生一个实例,并且是自行实例化. 和静态变量的区别 虽然 ...

  5. android 检测ListView滚动到的位置

    ListView滚动 1.要用到一个监听事件是:setOnScrollListener(); API解释是: Set the listener that will receive notificati ...

  6. android AsyncHttpClient 开源框架的使用

    AsyncHttpClient 1.在很多时候android都需要进行网络的操作,而android自带的HttpClient可以实现,但要进行很多网络连接的时候(如:下载很多图片),就需要线程池来进行 ...

  7. $(document).ready()与 window.onload执行时机

    $(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的.window.onload方法是子啊网页中的所有元素(包括元素的所有关联的文件)完 ...

  8. wikioi 1010 过河卒

    题目描述 Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如上图的C点),该马所在的点和所有跳跃一步可达的点 ...

  9. Javascript实现笛卡儿积算法

    在根据商品属性计算SKU时,通常会对商品不同选项的不同属性进行笛卡儿积运算. 这是在NodeJs里的实现版本,目前用在生产环境. function cartesian(elements) { if ( ...

  10. SRM 451 DIV 1 总结

    250p:这次是有史以来做的最快的一次250p...看题花了两分钟,敲代码最多一分钟...太明显了题意~ 500p:这题水了...每次都这样...很显然用DP来做,不过前面状态表示有问题了...搞了好 ...