<!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. 【图像处理】使用SDL预览webp图片

    写在前面的话 WebP是Google开发的一种图像格式,支持图像数据的有损和无损压缩.保留动画和alpha透明通道数据. 可以创建和JPEG.PNG和GIF图像格式在质量相同或质量更高,但是数据更小的 ...

  2. 启动线程组报错：Error occurred starting thread group :test_1, error message:Invalid duration 0 set in Thread Group:test_1, see log file for more details

    线程组基础信息都已经配置好,启动时报错,如下图: 排查原因:勾选了线程组调度器,并未设置参数 解决方案:取消勾选或者设置参数

  3. [考试总结]noip模拟40

    最近真的是爆炸啊... 到现在还是有不少没改出来.... 所以先写一下 \(T1\) 的题解.... 送花 我们移动右端点,之后我们用线段树维护全局最大值. 之后还要记录上次的位置和上上次的位置. 之 ...

  4. javascript对象——基本对象

    1.array对象 2.Boolean包装类对象和Date对象   3.Math对象 1到100随机数 4.RegExp对象 4.1 正则规则 如: 4.2 两种创建正则对象方式 /正则表达式/    ...

  5. 创建 Spring容器的三种方式

    一.src路径下打包完在war包的classes层级下 1.Spring容器创建的三种方式 创建Bean容器之后创建对象: 其中第三种使用的是BeanFactory对象 2.spring通过配置文件用 ...

  6. 【第十篇】- Git 远程仓库(Github)之Spring Cloud直播商城 b2b2c电子商务技术总结

    Git 远程仓库(Github) Git 并不像 SVN 那样有个中心服务器. 目前我们使用到的 Git 命令都是在本地执行,如果你想通过 Git 分享你的代码或者与其他开发人员合作. 你就需要将数据 ...

  7. 第一类值VS第二类值

    数据类型的分类:第一类值VS第二类值 第一类值:变量中可以存储函数,也就是说func类似int/double. 第二类值: 1.不能存储函数,不能动态创建函数,不能动态销毁函数; 2.只能存储一个指向 ...

  8. Shell系列（34） - 多分支case语句简介及实例

    多分支case条件语句 概念 case语句和if...elif...else语句一样都是多分支条件语句,不过和if多分支条件语句不同的是,case语句只能判断一种条件关系,而if语句可以判断多种条件关 ...

  9. 如何理解 jmeter 的线程数与并发数之间的关系

    https://blog.csdn.net/weixin_39955351/article/details/110548162 多个线程组的并发是如何计算的?

  10. nextcloud 中文乱码解决方案

    参考地址 :https://www.yht7.com/news/13909 我是使用的第二种方法, 修改/nextcloud/lib/public/AppFramework/Http/FileDisp ...