无缝滚动：

<!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. BZOJ4364：[IOI2014]Wall

    浅谈区间最值操作与历史最值问题:https://www.cnblogs.com/AKMer/p/10225100.html 题目传送门:https://lydsy.com/JudgeOnline/pr ...

  2. C#分词算法

    本文用到的库下载:点此下载 词库下载:点此下载 将词库直接放到项目根目录 词库设置如下: 类库说明 词库查看程序:点此下载 可以在上面的程序中添加常用行业词库 还可以通过下面的类在程序中实现 完整的盘 ...

  3. Poj 1659 Distance on Chessboard(国际象棋的走子规则)

    一.Description 国际象棋的棋盘是黑白相间的8 * 8的方格,棋子放在格子中间.如下图所示: 王.后.车.象的走子规则如下: 王:横.直.斜都可以走,但每步限走一格. 后:横.直.斜都可以走 ...

  4. Poj1207 The 3n + 1 problem(水题(数据)+陷阱)

    一.Description Problems in Computer Science are often classified as belonging to a certain class of p ...

  5. 【转】 Pro Android学习笔记（三八）：Fragment（3）：基础小例子-续

    目录(?)[-] Step 2实现Fragment指定调用类TitleFragment onInflate和onAttach onCreate和onCreateView onActivityCreat ...

  6. [快手(AAuto)学习笔记]如何让程序在运行时请求管理员权限（UAC）

    作者:ffsystem 作为(糟糕的)程序猿,习惯写代码解决一些简单事务.正常用批处理就能解决大部分工作,复杂一点用AutoIt 3. 有时候要分发给别人,就需要一个界面.外行你程序写得如何他看不懂, ...

  7. Java enum（枚举）使用详解之二

    enum 对象的常用方法介绍 int compareTo(E o)            比较此枚举与指定对象的顺序. Class<E> getDeclaringClass()       ...

  8. linux日常管理-系统进程查看工具-ps

    查看系统有那些进程 命令有ps aux 和命令 ps -elf USER  哪个用户使用了这个进程 PID  进程的id %CPU 占用CPU的百分比 %MEM 占用内存的百分比 VSZ 虚拟内存的大 ...

  9. java多态和强制类型转换

    子类可以赋值给超类,称之为向上转型,这个是自动的. 超类不可以赋值给子类,这个是向下转型,需要我们手动实现. 赋值给超类的子类引用在运行期间将表现出不同的特性,这就是多态. 小类型    可转换为   ...

  10. MySQL（进阶）

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...