无缝滚动：

<!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. 浏览器全屏的JS代码实现

    方法一:该方法是从一个网上的效果看到不错,然后自己就拿来下来实验了一下,还是比较满意度,下面直接给出代码 <!DOCTYPE HTML> <html lang="en-US ...

  2. BZOJ4695：最假女选手

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

  3. Asp.net工作流workflow实战之书签（二）

    1.winform(web程序)下使用工作流 怎样才能像控制台那样让winform或web页面窗体阻塞等待工作流的继续执行呢 2.BookMark书签 书签:和一般的书签看书的时候方便查看上次看的内容 ...

  4. 【转】 Pro Android学习笔记（六一）：Preferences（5）：组织Preference

    目录(?)[-] PreferenceCategory Child Preference PreferenceCategory 如果有多个preference,我们希望能在他们组织在一起.有两种方式, ...

  5. lua 函数调用 -- 闭包详解和C调用

    转自:http://www.cnblogs.com/ringofthec/archive/2010/11/05/luaClosure.html 这里, 简单的记录一下lua中闭包的知识和C闭包调用 前 ...

  6. 三 akka学习 actor的例子

    (转载: http://blog.csdn.net/chenleixing/article/details/44044243 ) Java并发编程的4种风格:Threads,Executors,For ...

  7. Python函数(十一)-生成器

    首先看一下什么是列表生成式 >>> [i*2 for i in range(10)] [0, 2, 4, 6, 8, 10, 12, 14, 16, 18] >>> ...

  8. 转载：IntelliJ IDEA 2016.2 配置Tomcat 运行Web项目

    以前都用MyEclipse写程序的 突然用了IDEA各种不习惯的说 借鉴了很多网上好的配置办法,感谢各位大神~ 前期准备 IDEA.JDK.Tomcat请先在自己电脑上装好 好么~ 博客图片为主 请多 ...

  9. Jenkins配置邮件SMTP(使用QQ邮箱)

    一.QQ邮箱中开启SMTP服务 进入QQ邮箱的设置页面,选择开启POP3/SMTP服务 需要发送一条短信开启服务,成功后,会收到一个密码,一定要截图.复制密码保存好 二.Jenkins中配置SMTP ...

  10. Linux查看并修改mysql的编码

    系统:阿里云 一.查看mysql字符集 输入:show variables like 'character_set_%'; 二.修改某一个数据库的编码 输入:alter database dbname ...