<!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>
