js实现文字左右轮播 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .textDiv{
                position: relative;
                width: 70%;
                margin: 0 auto;
            }
            
            ul>li {
                float: left;
                text-align: center;
                height: 38px;
                margin-top: 0;
                margin-left: 10px;
                list-style: none;
            }
            
            ul>li:hover {
                color: #18C0CF;
            }
        </style>
    </head>
    <body>
        <div class="textDiv">
                <span style="float:left;color: red;" id="warningTipSpan"></span>
                <div id="rotationDiv" style="width:90%;float: left;overflow: hidden;">
                    <div style="width:8000px;height: 30px; background:none;margin-left: 0;">
                        <ul style="float:left;">
                            <li>文字自动滑动1</li>
                            <li>文字自动滑动2</li>
                            <li>文字自动滑动3</li>
                            <li>文字自动滑动4</li>
                            <li>文字自动滑动5</li>
                            <li>文字自动滑动6</li>
                            <li>文字自动滑动7</li>
                            <li>文字自动滑动8</li>
                            <li>文字自动滑动9</li>
                            <li>文字自动滑动10</li>
                            <li>文字自动滑动11</li>
                            <li>文字自动滑动12</li>
                            <li>文字自动滑动13</li>
                            <li>文字自动滑动14</li>
                            <li>文字自动滑动15</li>
                        </ul>
                        <ul style="float:left;">
                        </ul>
                    </div>
                </div>
            </div>
            
            <script type="application/javascript">
                //文字左右轮播js
                
                //不知道什么原因，传递的是元素id，获取的element变成了obj对象
                function marquee(elementId, direction){
                    var obj = elementId;
                    var obj1 = document.querySelector("#"+elementId.id+" > div > ul:nth-child(1)");
                    var obj2 = document.querySelector("#"+elementId.id+" > div > ul:nth-child(2)");
                    if (direction == "up"){
                        if (obj2.offsetTop - obj.scrollTop <= 0){
                            obj.scrollTop -= (obj1.offsetHeight + 20);
                        }else{
                            var tmp = obj.scrollTop;
                            obj.scrollTop++;
                            if (obj.scrollTop == tmp){
                                obj.scrollTop = 1;
                            }
                        }
                    }else{
                        if (obj2.offsetWidth - obj.scrollLeft <= 0){
                            obj.scrollLeft -= obj1.offsetWidth;
                        }else{
                            obj.scrollLeft++;
                        }
                    }
                }
                
                function marqueeStart(elementId, direction){
                    var obj = document.getElementById(elementId);
                    var obj1 = document.querySelector("#"+elementId+" > div > ul:nth-child(1)");
                    var obj2 = document.querySelector("#"+elementId+" > div > ul:nth-child(2)");
                
                    obj2.innerHTML = obj1.innerHTML;
                    var marqueeVar = window.setInterval("marquee("+ elementId +", '"+ direction +"')", 30);
                    obj.onmouseover = function(){
                        window.clearInterval(marqueeVar);
                    };
                    obj.onmouseout = function(){
                        marqueeVar = window.setInterval("marquee("+ elementId +", '"+ direction +"')", 30);
                    };
                }
            
                marqueeStart("rotationDiv", "left");
            
            </script>
    </body>
</html>

 

posted @ 2023-04-04 14:54  初·陽  阅读(300)  评论(0)    收藏  举报