<html>
<head>
<meta charset="utf-8" />
<title>左右走马灯</title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
ul { list-style: none; }
li { float: left; font-size: 12px; font-weight: 700; height: 28px; display: inline-block; line-height: 28px; }
#wrap { width: 100%; margin: 0 auto; padding: 10px 0; background-color: rgba(0,0,0,0.2); overflow: hidden; }
#head { width: 100%; text-align: center; }
#head span { font-size: 20px; font-family: Microsoft Yahei; font-weight: 700; }
#body { width: 900px; height: 28px; overflow: hidden; margin: 0 auto; }
#content { width: 2400px; }
#list1 { float: left; background-color: rgba(0,0,0,0.2); }
#list2 { float: left; background-color: rgba(0,0,0,0.4); }
</style>
</head>
<body>
<div id="wrap">
<div id="head"><span>向左滚动样式</span></div>
<div id="body">
<div id="content">
<div id="list1">
<ul>
<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>
</ul>
</div>
<div id="list2"></div>
</div>
</div>
</div>
<script type="text/javascript">
var area = document.getElementById('body');
var list1 = document.getElementById('list1');
var list2 = document.getElementById('list2');
var speed = 10;
area.scrollLeft = 0;
list2.innerHTML = list1.innerHTML;
function scrollUp() {
if(area.scrollLeft >= list1.scrollWidth) {
area.scrollLeft = 0;
} else {
area.scrollLeft ++;
}
}
var myScroll = setInterval("scrollUp()", speed);
area.onmouseover = function() {
clearInterval(myScroll);
}
area.onmouseout = function() {
myScroll = setInterval("scrollUp()", speed);
}
</script>
</body>
</html>
