<!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>
标签:文字,轮播,js,ul,自动,var,滑动,elementId From: https://www.cnblogs.com/yangjcBlog/p/17286425.html