<!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. JS 之 每日一题 之 算法 （ 有多少小于当前数字的数字 ）

    给你一个数组 nums,对于其中每个元素 nums[i],请你统计数组中比它小的所有数字的数目. 换而言之,对于每个 nums[i] 你必须计算出有效的 j 的数量,其中 j 满足 j != i 且 ...

  2. Linux下Sed命令替换文件中的所有IP

    命令: sed -ri 's/([0-9]{1,3}\.){3}[0-9]{1,3}/localhost/g' es_create_index.sh 如图:

  3. openswan中out_sa()函数报文封装思想

    out_sa()函数报文封装思想讲解 1. out_sa前言 我已经在上一篇文章中将in_struct函数的基本原理进行了阐述,而out_struct()的实现基本是相同的,如果能理解in_struc ...

  4. Markdown时序图--基础语法

    时序图 ​ 序列图是一种交互图,它显示了流程以何种顺序相互操作. Mermaid可以渲染序列图,如下定义. sequenceDiagram Alice->>John:Message Hel ...

  5. Python - poetry（4）管理环境

    环境隔离 poetry 核心之一:使项目环境隔离,意味着始终和本地全局 Python 环境隔离 poetry 首先会检查当前项目是否在虚拟环境中运行:如果是将直接使用它,而不创建新的:如果不是,poe ...

  6. WPF WPF中解决内存泄露的几点提示与解决方法

    http://www.cnblogs.com/LastPropose/archive/2011/08/01/2124359.html 一直以来用WPF做一个项目,但是开发中途发现内存开销太大,用ANT ...

  7. Python小技巧：这17个骚操作你都OK吗？

    导读:Python 是一门非常优美的语言,其简洁易用令人不得不感概人生苦短.本文中带我们回顾了 17 个非常有用的 Python 技巧,例如查找.分割和合并列表等.这 17 个技巧都非常简单,但它们都 ...

  8. 《挑战程序设计竞赛》——DFS

    DFS(深度优先搜索) 简介 深度优先搜索(DFS,Depth-First Search)是搜索的手段之一.它从某个状态开始,不断的转移状态直到无法转移.然后退回到前一步的状态,继续转移到其他状态,如 ...

  9. dede调用文章内第一张原始图片(非缩略图)的实现方法

    第一步,修改include/extend.func.php文件,最下面插入函数,查询的是文章附加表,如需查询图片集什么的,改表名即可 //取原图地址 function GetFirstImg($arc ...

  10. javascript 继承 inheritance prototype

      * Rectangle继承Shape function Shape() { this.x = 0; this.y = 0; } Shape.prototype.move = function(x, ...