上下滚动轮播条_list 上下循环轮播-CSDN博客

本文链接：https://blog.csdn.net/hao452378531/article/details/51353245

源码：

hao_roll = {
    id:null,
    speed:30,
    timer:null,
    Num:0,
    oLiH:0,
    aLiH:0,
    mouseOn:false,
    json:null,
    //    初始化
    init:function(obj){
        this.json = {};
        for(var i in obj) {
            this.json[i] = obj[i];
        }
        this.oNav = document.getElementById(this.json.id);
//        alert(this.oNav.parentNode);
        var aLi = this.oNav.getElementsByTagName('li');
        //设置样式
        this.oNav.parentNode.style.position="relative";
        this.oNav.style.position='absolute';
        this.oNav.style.left='0';
        this.oNav.style.top='0';
        for(var i=0; i<aLi.length; i++){
            aLi[i].style.float = 'left';
        }
        this.oLiH = aLi[0].offsetHeight;
        this.aLiH = this.oLiH*aLi.length*2;
        this.oNav.innerHTML+=this.oNav.innerHTML;
//        console.log(this.aLiH)
    },
    //    定时器
    Timer:function(){
        this.timer = setInterval(function(){
            hao_roll.Num--;
//            console.log(hao_roll.Num);
            if(hao_roll.Num<=(-hao_roll.aLiH/2)){
                hao_roll.Num=1;
            }
            hao_roll.oNav.style.top = hao_roll.Num+'px'
        },this.speed);
    },
    //    事件执行
    roll:function(obj){
//        console.log(obj);
        hao_roll.init(obj);
        this.id = this.json.id;
        this.speed = this.json.speed;
        this.mouseOn = this.json.mouseOn;
        this.Timer();
        if(this.mouseOn){
            hao_roll.oNav.onmouseover = function(){
                hao_roll.moseover();
            };
            hao_roll.oNav.onmouseout = function(){
                hao_roll.moseout();
            };
        }
    },
    //鼠标移上清除定时器
    moseover:function(){
            clearInterval(this.timer);
    },
    //鼠标移开定时器继续运行
    moseout:function(){
        this.Timer()
    }
};

html代码：

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0; padding: 0;}
        .tab{width: 900px; height: 30px; overflow: hidden;  margin: 100px auto;}
        .nav{width: 900px; overflow: hidden; }
        .nav ul{width:900px; overflow: hidden;}
        .nav ul li{width: 900px; height: 30px; background: #000000;text-align: center; color: #FFFFFF; list-style: none ; line-height: 30px; cursor: pointer}
        .nav .a{background: #ff0000;}
        .nav .b{background: #000000;}
        .nav .c{background: #0038c0;}




    </style>
</head>
<body>
<div class="tab">
    <div class="nav" id="Nav">
        <ul>
            <li class="a">第一行</li>
            <li class="b">第二行</li>
            <li class="c">第三行</li>
        </ul>
    </div>
</div>
<script src="js/hao_roll.js"></script>
<script>
    hao_roll.roll({
        id:'Nav', //设置ID
        speed:30, //设置滚动速度单位毫秒
        mouseOn:true  //是否打开鼠标移上停止滚动默认是false
    });
</script>
</body>
</html>