新闻公告无缝轮播--demo

理解：向上移动一个li的高度+margin-bottom值，同时将ul第一个的li插入到ul的最后一个位置。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Examples</title>

    <meta name="description" content="">

    <meta name="keywords" content="">

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

    <style type="text/css">

        *{padding:0;margin:0;list-style:none;font-family:MicroSoft YaHei;}

        .wrap{

            margin:100px auto;

            width:600px;

            border:1px #eee solid;

            padding:5px 10px;

            overflow:hidden;

            height:115px;

        }

        .wrap ul li{

            height:40px;

            line-height:40px;

            border-bottom:1px #eee solid;

            font-size:14px;

            color:#868686;

        }

    </style>

</head>

<body>

<div id="auto-scroll" class="wrap">

    <ul>

        <li>前端技术，是一门进阶容易，精通很难的技术;</li>

        <li>相比于后端技术，前端在国内应该是近5年内兴起的一门新技术新职位;</li>

        <li>目前,在大学里尚未设有前端的专门专业;</li>

        <li>许多前端大神都是自学成才或者是从后端转前端的;</li>

        <li>前端工程师是最接近用户的"程序员",其实也未必是"程序员"!,因为前端不仅需要学习技术方面的；</li>

        <li>也要懂得设计、用户体验、产品、程序运行流程、浏览器兼容性、http协议...等等;</li>

        <li>这就需要前端工程师不仅要有系统的技术技能，也需要有宽广的视野...</li>

        <li>广泛学习，留心观察，做一个有技术，有气质的前端吧~</li>

    </ul>

</div>

<script>

    function moveTo(obj) {

        $(obj).find("ul:first").animate({

            marginTop: "-40px"

        }, 2000, function (){

            // console.log($(this));

            $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);

        });

    }

    var timer;

    $('#auto-scroll').hover(function(){

        clearInterval(timer);

    }, function(){

        timer = setInterval('moveTo("#auto-scroll")', 3000) ;

    }).trigger('mouseleave');

</script>

</body>

</html>

　　

jquery 无缝轮播的更多相关文章

  1. 记一个jquery 无缝轮播的制作方法

    接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...

  2. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  3. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  4. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  5. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  7. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

  8. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  9. 网站banner无缝轮播

    网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. C++/MFC-线程优先级

    转载: https://blog.csdn.net/qwdpoiguw/article/details/72830426 一.线程优先级(Thread priority ) 简单的说就是(线程)的优先 ...

  2. ganglia分布式监控部署

    一．介绍        Ganglia是由UC Berkeley发起的一个开源监控项目,设计用于监控数以千几的节点.每台服务器都运行一个收集和发送监控数据名为gmond的守护进程.它将从操作系统和指定 ...

  3. Linux驱动技术(六) _内核中断

    在硬件上,中断源可以通过中断控制器向CPU提交中断,进而引发中断处理程序的执行,不过这种硬件中断体系每一种CPU都不一样,而Linux作为操作系统,需要同时支持这些中断体系,如此一来,Linux中就提 ...

  4. Dockerfile编写的注意事项

    一.Dockerfile合理分层 Dockerfile的写法不合理,有时候会导致镜像膨胀,由于Docker是分层设计,而在Dockerfile中,每一条指令都拥有自己的context,而执行到下一条指 ...

  5. 10.22crm

    2018-10-23 08:28:41 由于昨晚上断网,所以今天早上补更一下 越努力,越幸运!永远不要高估自己! crm老师就讲三四天,还有明后两天! 主要是讲一些基本使用,自定义配置陪一些东西! 主 ...

  6. 移动APP项目总结

    刚开始做这个项目,看着觉得内容不多,但细节问题很多,很多容易出错的地方, 如下: 项目效果 起初是这样做的 HTML: <div class="seller"> < ...

  7. Nordic NRF51822 从零开始系列（外部设备片—MPU6050DMP驱动的移植）

    一.硬件准备             (1)开发板和软件参看 Nordic NRF51822 从零开始系列(一)开发环境的搭建             (2)mpu6050模块 二.前置知识     ...

  8. 网卡配置文件详解 用户管理与文件权限篇 文件与目录权限 软连接 tar解压命令 killall命令 linux防火墙 dns解析设置 计划任务crond服务 软件包安装 阿里云 yum源 安装

    Linux系统基础优化及常用命令 Linux基础系统优化 引言没有,只有一张图. Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令. ...

  9. centos 断网

    不知道为什么.....开启服务后就是断线 查询 ip addr 故障状态 正常状态 配置中关闭网络管理 命令:chkconfig NetworkManager off 配置中开启网络管理 命令: ch ...

  10. C# chart 编程教程

    http://www.gcpowertools.com.cn/docs/ComponentOne/WinFormChart/#!Documents/_41.htm