无缝滚动：

<!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. javascript中eval()函数使用方法

    本教程主要重介绍eval()函数的语法与使用方法,及在后面我还补充了eval()解析json数据的相关例子,希望文章能帮助到各位深入理解eval()使用方法吧.   前几天说到js中尽量不要使用eva ...

  2. GSM/GPRS操作示例

    A6(GPRS)  博文转自安信科技: http://wiki.ai-thinker.com/gprs/examples 1.电话接收 相关指令 ATDxxxxx;//xxx为电话号码 示例 打电话 ...

  3. netty中的ByteBuf

    网络数据的基本单位总是字节.Java NIO 提供了 ByteBuffer 作为它 的字节容器,但是这个类使用起来过于复杂,而且也有些繁琐. Netty 的 ByteBuffer 替代品是 ByteB ...

  4. DCloud-MUI：文档 UI组件

    ylbtech-DCloud-MUI:文档 UI组件 1.返回顶部 1.accordion(折叠面板) 折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: <ul class=&qu ...

  5. phpstorm断点调试 php.ini 文件中 Xdebug 配置

    [XDebug]xdebug.profiler_output_dir="D:\phpStudy\tmp\xdebug"xdebug.trace_output_dir="D ...

  6. js提交数据时需判断是点击事件还是回车键

    使用回车键实质还是点击事件==回车时将焦点聚居在某个标签上. Html代码: <div id="btlogin" class="btlogin">& ...

  7. shutdown-用于关闭/重启计算机

    Linux系统下的shutdown命令用于安全的关闭/重启计算机,它不仅可以方便的实现定时关机,还可以由用户决定关机时的相关参数.在执行shutdown命令时,系统会给每个终端(用户)发送一条屏显,提 ...

  8. mysql修改查询出来的时间格式

    var d = new Date(rss.createtime); let youWant = d.getFullYear() + ) + '-' + d.getDate() + ' ' + d.ge ...

  9. MySql获取记录的名次

    在oracle中有rownum之类的东西表示记录的名次,那么在MySql中怎么获取名次呢? as rank ) B 获取的rank就是名次了 user_id rank 134762    122139 ...

  10. Oracal主键 唯一报错

    ORA-00001: 违反唯一约束条件 --解决方法 2017年07月27日 12:04:11 阅读数:11853 1.错误 Caused by: java.sql.BatchUpdateExcept ...