<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../jquery/jquery-1.11.2.js"></script>

    <style>

        div,ul,li,img{

            margin:0;

            padding:0;

        }

        #div1{

            width:1000px;

            height:200px;

            margin:0 auto;

            position: relative;

            overflow: hidden;

        }

        #div1 ul{

            position: absolute;

            list-style: none;

            left:0;

        }

        #div1 ul li{

            margin:5px;

            height:200px;

            width:200px;

            background: #f00;

            position: absolute;

        }

    </style>

    <script>

    $(function(){

        $("#div1 ul li").each(function(index,element){

            $(this).css({"left":index*210+"px"});

        })

        var sid=setInterval(function(){

            $("#div1 ul li").css({"left":"-=2px"});

            if($("#div1 ul li:eq(5)").position().left<=-210){//第六个li的left小于-210时，前六个li的位置全部改变

                $("#div1 ul li:lt(6)").each(function(index,element){

                    $(this).css({"left":index*210+1260+"px"});

                })

            }

            if($("#div1 ul li:eq(11)").position().left<=-210){//最后一个li的left小于-210，后六个的位置全部改变           
　　　　　　　　　　$("#div1 ul li:gt(5)").each(function(index,element){

                    $(this).css({"left":index*210+1260+"px"});

                })

            }

        },10);

        $("#div1").mouseover(function(){

            clearInterval(sid);

        })

        $("#div1").mouseout(function(){

            sid=setInterval(function(){

            $("#div1 ul li").css({"left":"-=2px"});

            if($("#div1 ul li:eq(5)").position().left<=-210){

                $("#div1 ul li:lt(6)").each(function(index,element){

                    $(this).css({"left":index*210+1260+"px"});

                })

            }

            if($("#div1 ul li:eq(11)").position().left<=-210){

                $("#div1 ul li:gt(5)").each(function(index,element){

                    $(this).css({"left":index*210+1260+"px"});

                })

            }

        },10);

        })

    })

    </script>

</head>

<body>

    <div id="div1">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

        </ul>

    </div>

</body>

</html>

jquery-无缝滚动的更多相关文章

  1. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  2. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  3. jquery——无缝滚动

    无缝滚动: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. jquery 无缝滚动 jquery.kxbdmarquee

    DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ D ...

  5. jQuery无缝滚动插件

    插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults ...

  6. jquery无缝滚动效果实现

    demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. jQuery无缝滚动向上

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

  8. jquery图片无缝滚动代码左右 上下无缝滚动图片

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

  9. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  10. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

随机推荐

  1. pluto中监听各个网口的500端口处理逻辑

    1. pluto中监听各个网口的500端口处理逻辑 whack_handle() find_ifaces() find_raw_ifaces4() socket.setsockopt.bind.ioc ...

  2. PPPoE技术白皮书(H3C)

    PPPoE技术白皮书 关键词:PPP,Ethernet,PPPoE 摘要:PPPoE是一种通过一个远端接入设备为以太网上的主机提供接入服务,并可以对接入的每个主机实现控制和计费的技术.本文介绍了PPP ...

  3. linux 命令进阶篇之二

    一.预备知识 选取init的进程. cat :由第一行开始显示文件内容 tac:由最后一行开始显示,有没有发现和cat是反过来写的 more:一页一页的显示内容 less:与more相似,但是可以往前 ...

  4. NLP与深度学习（四）Transformer模型

    1. Transformer模型 在Attention机制被提出后的第3年,2017年又有一篇影响力巨大的论文由Google提出,它就是著名的Attention Is All You Need[1]. ...

  5. python库--pandas--MultiIndex

    *表示后面会重复用到此参数 创建层次化索引 pd.MultiIndex 构造器 MI levels 每个级别不重复的标签 labels 每个级别的整数指定每个位置 *sortorder=None   ...

  6. 在 Docker 的 CentOS7 镜像 中安装 mysql

    在 Docker 的 CentOS7 镜像 中安装 mysql 本来以为是个很简单的过程居然折腾了这么久,之前部署云服务器时也没有好好地记录,因此记录下. 特别提醒:本文的操作环境是在 Docker ...

  7. 离散化模板题 II ——重复元素离散化后的数字不相同

    离散化模板题 II --重复元素离散化后的数字不相同 题目描述 现有数列A1, A2, ⋯, An,数列中可能有重复元素. 现在要求输出该数列的离散化数列,重复元素离散化后的数字不相同. 输入 第一行 ...

  8. PHP的另一个高效缓存扩展：Yac

    之前的文章中我们已经学习过一个 PHP 自带的扩展缓存 Apc ,今天我们来学习另一个缓存扩展:Yac . 什么是 Yac 从名字其实就能看出,这又是鸟哥大神的作品.毕竟是 PHP 的核心开发人员,他 ...

  9. 查看Docker启动jenkins的管理员密码

    Docker启动docker后,第一次方法jenkins,需要输入管理员密码. 其实查看启动时候的日志可以看到密码,也可以按照以下方法找到密码. 1.查看docker容器ID:docker ps -a ...

  10. PHP 流行的框架

    Aura Laravel Symphony Yii Zend php components Packagist 最好的组件: Awesome PHP https://www.yiiframework. ...