貌似克隆没有用啊,之前用这个做过一个联系没问题,今天重新来看,出问题了,耐心滚动看一下,求解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
a {
color: #333;
text-decoration: none; /* 超链接样式 */
}
#main{ width: 300px; height:200px; overflow:hidden;position: relative; margin: 5px; border: 1px solid #000; }
#con li{ height: 24px; line-height: 24px; overflow:hidden; padding-left: 10px;}
#con li a{ text-decoration: none; color: #333; }
</style>
</head>
<body>
<div id="main">
<ul id="con">
<li><a href="#">这里是滚动区域这里是滚动区域1</a></li>
<li><a href="#">滚动区域这里是滚动区域这里是滚动区域2</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域这里是滚动</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">滚动区域这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域这里是滚动</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域5</a></li>
<li><a href="#">滚动区域这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域这里是滚动</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">滚动区域这里是滚动区域这里是滚动区域</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域这里是滚动</a></li>
<li><a href="#">这里是滚动区域这里是滚动区域</a></li>
</ul>
<ul id="kelon"></ul>
</div>
<script>
var area = document.getElementById("main");
var con = document.getElementById("con");
var kelon = document.getElementById("kelon");
kelon.innerHTML = con.innerHTML;
var time = 50;
function scrollH(){
if (area.scrollTop >= con.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
var scroll = setInterval("scrollH()",time);
area.onmouseover = function(){
clearInterval(scroll);
}
area.onmouseout = function(){
scroll = setInterval("scrollH()",time);
}
</script>
</body>
</html>