<!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. Docker容器管理——Docker容器常用命令

    1.查看所有的容器 docker ps 2.查看运行的容器 docker ps -a 3.启动.停止.重启docker容器 docker start ... docker stop ... docke ...

  2. GoLang设计模式04 - 单例模式

    单例模式恐怕是最为人熟知的一种设计模式了.它同样也是创建型模式的一种.当某个struct只允许有一个实例的时候,我们会用到这种设计模式.这个struct的唯一的实例被称为单例对象.下面是需要创建单例对 ...

  3. WEB漏洞——PHP反序列化

    序列化 首先说说什么是序列化 序列化给我们传递对象提供了一种简单的方法.serialize()将一个对象转换成一个字符串,并且在转换的过程中可以保存当前变量的值 而反序列化unserialize()将 ...

  4. XML基础——extensible markup language

    一.xml概念 1.xml和html区别 其中,xml是纯文本文件,跨语言:浏览器有html解析器也有xml解析器: 2.和properties配置文件区别 二.xml语法 1.基本语法 三.xml组 ...

  5. Activiti 学习（三）—— Activiti 流程启动并完成

    Activiti 流程启动 流程定义部署后,就可以通过工作流管理业务流程了,也就是说前文部署的出差申请流程可以使用了.针对该流程,启动一个流程表示发起一个新的出差申请单,这就相当于 java 类与 j ...

  6. CentOS 7操作系统安装

    1.关于运维小伙伴可以采用何种方式安装操作系统 下面列举的只是我会用到的安装方式,在运维过程中并不一定是最优解,只是自己运维过程中的一些经验. (1)物理服务器,可以通过连接管理口来安装操作系统,管理 ...

  7. 通过HttpURLConnection下载图片到本地--下载附件

    一.背景说明 现在我做的系统中,需要有一个下载附件的功能,其实就是下载图片到本地中.相应的图片保存在多媒体系统中,我们只能拿到它的资源地址(url),而不是真实的文件. 这里记录的是下载单个图片.下篇 ...

  8. DebugView端游日志查看工具

    端游日志工具 端游开发的同学可以通过DebugView - Windows Sysinternals | Microsoft Docs来查看游戏打印的log,它允许你监控本地系统上的debug pri ...

  9. Android使用Fragment+ViewPager +TabLayout实现顶部标题栏

    参考资料: https://blog.csdn.net/Tobey_r1/article/details/93221486 项目背景是Android开发新闻APP,实现新闻文本的分类,内容的展示,并实 ...

  10. linux重启mysql

    一. 启动1.使用 service 启动:service mysql start2.使用 mysqld 脚本启动:/etc/inint.d/mysql start3.使用 safe_mysqld 启动 ...