<!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. 20210811 Dove 打扑克,Cicada 与排序,Cicada 拿衣服

    考场 开考感觉 T3 比较可做.T1 看上去不难但毫无思路. 先想了 25min T3,想到一个确定左端点,二分最长的右端点,甚至想到了用猫树维护区间 or and...上厕所回来发现假了,没有单调性 ...

  2. 第07课：GDB 常用命令详解（下）

    本课的核心内容: disassemble 命令 set args 和 show args 命令 tbreak 命令 watch 命令 display 命令 disassemble 命令 当进行一些高级 ...

  3. Element MenuNav刷新后点击菜单保留选中状态

    正常情况刷新后选中菜单会失去选中的状态,需要把default-active 当前激活菜单的 index保存下来这样刷新后读取 methods方法中增加 getSess() { this.active ...

  4. 生成随机uuid

      /**  * 生成随机uuid  */ export function uuid() {   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.repla ...

  5. 最全Windows版本jemalloc库（5.2.1）及其使用：包含动态库和静态库、x86版本和x64版本、debug版本和release版本

    编写服务器程序时,需要频繁的申请和释放内存,长时间运行会产生大量的内存碎片,这就导致即使当前系统中的闲置内存还足够多,但也无法申请到大的连续可用的内存块,因为此时的物理内存已经千疮百孔像个马蜂窝.此外 ...

  6. Spring Cloud Gateway 学习+实践

    官网上给出的Spring Cloud Gateway特性如下图所示: 翻译过来就是: 基于 Spring Framework 5 ,Project Reactor 以及 Spring Boot 2.0 ...

  7. hadoop集群搭建详细教程

    本文针对hadoop集群的搭建过程给予一个详细的介绍. 参考视频教程:https://www.bilibili.com/video/BV1tz4y127hX?p=1&share_medium= ...

  8. 在树莓派用C#+Winform实现传感器监测

    最近学校里发了个任务,说要做一个科技节小发明,然后我就掏出我的树莓派准备大干一场. 调料 Raspberry Pi 3B+ 树莓派GPIO扩展板 3.5寸电容触摸屏(GPIO接口) 土壤湿度传感器(G ...

  9. PHP设计模式之访问者模式

    访问者,就像我们去别人家访问,或者别人来我们家看望我们一样.我们每个人都像是一个实体,而来访的人都会一一的和我们打招呼.毕竟,我们中华民族是非常讲究礼数和好客的民族.访问者是GoF23个设计模式中最复 ...

  10. PHP中的输出缓冲控制

    在 PHP 中,我们直接进行 echo . 或者 print_r 的时候,输出的内容就会直接打印出来.但是,在某些情况下,我们并不想直接打印,这个时候就可以使用输出缓冲控制来进行输出打印的控制.当然, ...