经典、实用的无缝滚动和轮播

来源：互联网发布：john resig 知乎编辑：程序博客网时间：2024/05/21 09:20

一、写在前面

无缝滚动和轮播都是循环的执行翻页或者位移操作一般无缝运行的时间间隔较小（50ms），轮播2-3s

二、无缝滚动

核心：视窗的scrollTop或margin-top小于它的高度的时候，一直往上移，else置零（下移原理相同）；或者scrollLeft或margin-left小于它的宽度的时候，一直往左移，else置零（右移原理相同）调用：一般用t=setInterval(scrollFun,speed);停止与再运行eleWrap.hover(function() {clearInterval(t);}, function() {t = setInterval(scrollFun,speed);});其他：为了不让移动在移动到最后一个子内容的时候出现跳闪或者空白，一般在调用移动前，移动区域内再添加一次其内容。

<meta charset="utf-8"/><script type="text/javascript" src="http://www.php100.com/manual/jquery/js/jquery-2.1.4.min.js"></script><script type="text/javascript">// 滚动    function autoScroll(){        var speed = 50;        var eleWrap = $("#evtAwardListWrap"),             ele1 = $("#evtAwardList1");        if(ele1.html() !== "") {            var html2 = "<ul>" + ele1.html() + "</ul>";            eleWrap.find("ul").eq(0).siblings().remove();            eleWrap.append(html2);        }        var sTop = 0;        var scrollFun = function() {            if(eleWrap.scrollTop() < $("#evtAwardList1").height()) {                sTop ++;                eleWrap.scrollTop(sTop);            } else {                eleWrap.scrollTop(0);                sTop = 0;            }        }        var t=setInterval(scrollFun,speed);             eleWrap.hover(            function() {                clearInterval(t);            }, function() {                t = setInterval(scrollFun,speed);             }        );    }    $(function(){    autoScroll();    });</script>    <div id="evtAwardListWrap" class="evt_award_list_wrap">        <ul id="evtAwardList1">        <li>恭喜用户334**抽中5元现金劵</li>        <li>恭喜用户561**抽中50元现金劵</li>        <li>恭喜用户228**抽中5元现金劵</li>        <li>恭喜用户993**抽中5元现金劵</li>        <li>恭喜用户468**抽中5元现金劵</li>        <li>恭喜用户878**抽中100元现金劵</li>        <li>恭喜用户933**抽中5元现金劵</li>        <li>恭喜用户153**抽中50元现金劵</li>        <li>恭喜用户335**抽中5元现金劵</li>        <li>恭喜用户369**抽中5元现金劵</li>        <li>恭喜用户777**抽中5元现金劵</li>        <li>恭喜用户712**抽中满2000-150优惠劵</li>        <li>恭喜用户648**抽中5元现金劵</li>        <li>恭喜用户419**抽中50元现金劵</li>        <li>恭喜用户552**抽中50元现金劵</li>        <li>恭喜用户973**抽中5元现金劵</li>    </ul>    </div>    <style type="text/css">     .evt_award_list_wrap{border:1px red solid; position: relative;width:346px;height:160px;overflow: hidden;font-size: 14px;color:#000; line-height: 26px;}     </style>

0 0