原生js轮播算法

OC.Homepage = {

    /*滚动效果
    函数startmarquee的参数:
    lh : 文字一次向上滚动的距离或者高度;(样式高度也要修改)(可配置样式高度和整理一样来显示一次滚动几条);
    speed : 滚动速度
    delay : 滚动停顿的时间间隔
    index : 可以使分装后的函数应用于页面中不同的元素
    */

    startmarquee : function(ln,speed,delay,index){

        var t;
        var p = false;//p是true还是fasle直接影响到下面start()函数的执行

        //获取文档中的滚动区域对象
        var o = document.getElementById("notice_ul");
        var li_count = o.getElementsByTagName("li").length;
        if(li_count * 25 <= o.offsetHeight){
            return;
        }

        o.innerHTML +=  o.innerHTML; //对象中的实际内容被复制了一份,复制的目的在于给文字给文字不间断向上滚刀提供过渡

        //鼠标滑过,停止滚动
        o.onmouseover = function(){ p = true; }
        o.onmouseout = function(){ p = false; }

        //文字内容顶端与滚动区域顶端的距离,初始值为0(卷起的距离)
        0.scrollTop = 0;

        function start(){
            t = setInterval(scrolling,speed);
            //滚动停止或者开始,取决于b传过来的布尔值
            if(!p){
                o.srcollTop += 1;
            }
        }

        function scrolling(){
            //如果不被整除,即上一次上移动的高度达不到lh,则内容会继续向上滚动
            if(o.scrollTop % lh != 0){
                o.scrollTop += 1;
                //对象o中的内容之前被复制了一次,所以它的滚动高度,其实是原来内容的两倍高度;
                //当内容向上滚动到scrollHeight/2的高度时,全部3行文字已近显示了一遍,至此
                //srcollTop归0,再等待一下轮的滚动,从而达到文字不间断向上滚动的效果;
                if(o.scrollTop >= o.scrollHeight / 2){
                    o.scrollTop = 0;
                }else{
                    //否则清除t,暂停滚动
                    clearInterval(t);
                    //经过delay间隔后,启动start() 再连续滚动
                }
            }
        }
        //第一次启动滚动;setTimeout会在一定的时间后执行start(),且只执行一次
        setTimeout(start,delay);
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值