无缝滚动：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无缝滚动</title>

    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>

    <style type="text/css">

        body,ul,li{

            margin:0;

            padding:0;

        }

        ul{list-style: none;}

        .slide{

            width:500px;

            height:100px;

            border:1px solid #ddd;

            margin:20px auto 0;

            position: relative;

            overflow:hidden;

        }

        .slide ul{

            position: absolute;

            width:1000px;

            height:100px;

            left:0;

            top:0;

        }

        .slide ul li{

            width:90px;

            height:90px;

            margin:5px;

            background-color: antiquewhite;

            line-height: 90px;

            text-align:center;

            font-size:30px;

            float:left;

        }

        .btns{

            width:500px;

            height:50px;

            margin:10px auto 0;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            var $ul = $('#slide ul');

            var left = 0;

            var speed = 2;

            $ul.html($ul.html()+$ul.html());

            var move = function () {

                left-=speed;

                if(left<-500){

                    left = 0;

                }

                if(left>0){

                    left = -500;

                }

                $ul.css({left:left});

            };

            var timer = setInterval(move,30);

            $('#btn1').click(function () {

                speed = 2;

            });

            $('#btn2').click(function () {

                speed = -2;

            });

            $('#slide').mouseover(function () {

                clearInterval(timer);

            });

            $('#slide').mouseout(function () {

                timer = setInterval(move,30);

            })

        })

    </script>

</head>

<body>

    <div class="btns">

        <input type="button" name="" value="向左" id="btn1">

        <input type="button" name="" value="向右" id="btn2">

    </div>

    <div class="slide" id="slide">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</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 无缝滚动 jquery.kxbdmarquee

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

  4. jQuery无缝滚动插件

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

  5. jquery无缝滚动效果实现

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

  6. jQuery无缝滚动向上

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

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

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

  8. JQuery的无缝滚动

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

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

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

随机推荐

  1. jraiser小结

    1 合并小结 jrcpl F:\site\js\app --settings package.settings 上面代码的意思,就是说,根据package.settings文件,来对app文件夹下的所 ...

  2. PythonPath在Windows 下的设置

    今天在调试Evernote SDK时, 遇到PythonPath的问题. 查了很多资料,有说用系统环境变量添加PythonPath, 有说在注册表中的PythonPath添加新Default字段, 但 ...

  3. python文件操作 seek(),tell()

    seek():移动文件读取指针到指定位置 tell():返回文件读取指针的位置 seek()的三种模式: (1)f.seek(p,0)  移动当文件第p个字节处,绝对位置 (2)f.seek(p,1) ...

  4. shell入门-连接符（并且、和、或者）

    特殊符号:&& 说明:并且,左右两边是两条命令,左面的执行成功才会去执行右面的命令.右. 特殊符号:|| 说明:或者,左右两边是两条命令,左边的命令执行不成功,才会执行右面的命令 &a ...

  5. win10系统-javac不是内部或外部命令

    给笔记本装了一个ssd,上午装的系统,重新搞jdk,设置JAVA_HOME之后,cmd运行javac报 “javac不是内部或外部命令”各种懵逼,试了好几次才发现Path路径里面不能用%JAVA_HO ...

  6. body-parser 是一个Http请求体解析中间件

    1.这个模块提供以下解析器 (1) JSON body parser (2) Raw body parser (3)Text body parser (4)URL-encoded form body ...

  7. .net 缓存之文件缓存依赖

    CaCheHelp 类中代码如下: #region 根据键从缓存中读取保持的数据 /// <summary> /// 根据键从缓存中读取保持的数据 /// </summary> ...

  8. Java探索之旅(8)——继承与多态

    1父类和子类: ❶父类又称基类和超类(super class)子类又称次类和扩展类.同一个package的子类可以直接(不通过对象)访问父类中的(public,缺省,protected)数据和方法. ...

  9. Java探索之旅(2)——GUI输入输出与代码的规范性

    1.知识点概叙 ① 定名常量:关键字final,类似C++ const定义,一般用大写:final double PI=3.1415926 ② 5/2=2:5.0/2=2.5://通常意义的除法,至少 ...

  10. Mysql 增量备份和全量备份

    全量备份: # vim /root/DBFullyBak.sh //添加以下内容 #!/bin/bash # Program # use mysqldump to Fully backup mysql ...