无缝滚动：

<!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. Oracle 12C 新特性之扩展数据类型（extended data type）

    Oracle 12C 新特性-扩展数据类型,在12c中,与早期版本相比,诸如VARCHAR2, NAVARCHAR2以及 RAW这些数据类型的大小会从4K以及2K字节扩展至32K字节.只要可能,扩展字 ...

  2. spark提交异常日志分析

    java.lang.NoSuchMethodError: org.apache.spark.sql.SQLContext.sql(Ljava/lang/String;)Lorg/apache/spar ...

  3. js中this

    首先声明,我是小白,以下只是自己的简单理解. 先看下面的代码: (function () { console.log(this); })(); 毫无疑虑,输出的是window. 在看下面代码: (fu ...

  4. bean validator - Hibernate validator

    在后台开发过程中,对参数的校验成为开发环境不可缺少的一个环节.比如参数不能为null,email那么必须符合email的格式,如果手动进行if判断或者写正则表达式判断无意开发效率太慢,在时间.成本.质 ...

  5. Ruby中的include

    Ruby中的include语句应注意以下两个问题: 1.include与文件无关.C语言中,#include预处理指令在编译期将一个文件的内容插入到另一个文件中.Ruby语句只是简单地产生一个指向指定 ...

  6. Spring Boot 专栏

    http://blog.csdn.net/column/details/spring-boot.html?&page=2

  7. Jumony.Core非常厉害的一个开源项目!

    简单的说,就是解析html文档的,以前发送一个get请求获取一个页面的html文本后,想要获取里面的数据都是使用正则表达式.(非常的苦逼), 现在用这个获取就very easy! 安装的话在Nu Ge ...

  8. Qt 按顺序保存多个文件

    void MainWindow::on_pushButtonSnap_clicked() { ]; sprintf(image_name, "%s%d%s", "C:/i ...

  9. Vue之vue.js声明式渲染

    Html: <div id="app"> {{ message }} </div> Vue: var app = new Vue({ el: '#app', ...

  10. mysql四个默认数据库

    1.Master数据库  Master数据库记录了Sqlserver所有的服务器级系统信息,所有的注册帐户和密码,以及所有的系统设置信息,还记录了所有用户定义数据库的存储位置和初始化信息. 2.Tem ...