jquery 无缝轮播

新闻公告无缝轮播--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;
            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>

  

原文地址:https://www.cnblogs.com/keleyz/p/9109870.html