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

一、写在前面

无缝滚动和轮播都是循环的执行翻页或者位移操作
一般无缝运行的时间间隔较小(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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值