<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不间断滚动效果</title>
<style>
*{ margin:0; padding:0;}
.marquee_box{ width:200px; height:200px; border:1px solid #000; overflow:hidden;}
ul li{ list-style:none; line-height:20px;}
.scrollLeft_box{ width:400px; height:200px; overflow:hidden; border:1px solid #000;}
.scrollLeft_box img{ width:200px; height:200px; margin-left:3px;}
.scrollLeft_box table{ padding:10px; border:0; display:inline;}
.scrollLeft_box table tr td{ width:300px;}
.scrollLeft_box ul li{ float:left;}
</style>
</head>
<body>
<p>纵向滚动效果（成功）：</p>
<div class="marquee_box" id="box">
<div id="box1">
<ul>
<li>条目1:这里是标题处，这里是标题处额...</li>
<li>条目2:这里是标题处，这里是标题处额...</li>
<li>条目3:这里是标题处，这里是标题处额...</li>
<li>条目4:这里是标题处，这里是标题处额...</li>
<li>条目5:这里是标题处，这里是标题处额...</li>
<li>条目6:这里是标题处，这里是标题处额...</li>
<li>条目7:这里是标题处，这里是标题处额...</li>
</ul>
</div>
<div id="box2"></div>
</div>
<p>横向滚动效果(成功,但是我现在只能用表格做，而且滑动的内容必须写在td里面)：</p>
<div class="scrollLeft_box" id="left_bigBox">
<table cellpadding="0" cellspacing="6">
<tr>
<td width="300" id="left_box1" valign="top">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="200"><div style=" width:200px;">这里是文字哦</div></td>
<td> <img src="2.jpg"></td>
<td> <img src="3.jpg"></td>
<td> <img src="4.jpg"></td>
<td> <img src="5.jpg"></td>
</tr>
</table>
</td>
<td id="left_box2" valign="top">
</td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
//在这里我故意把横向滚动和纵向滚动分开写，方便以后使用
//纵向滚动
var bigBox=document.getElementById("box");
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var preTop=0;
box2.innerHTML=box1.innerHTML;
function AutoMar(){
automar=setInterval("Marquee()",100);
}
function Marquee(){
preTop=bigBox.scrollTop;
bigBox.scrollTop++;
if(preTop==bigBox.scrollTop)
{ bigBox.scrollTop=0;
bigBox.scrollTop++;
}
}
function ClearAuto(){
clearInterval(automar);
}
//横向滚动
var left_bigBox=document.getElementById("left_bigBox");
var left_box1=document.getElementById("left_box1");
var left_box2=document.getElementById("left_box2");
var preLeft=0;
left_box2.innerHTML=left_box1.innerHTML;
function AutoMar2(){
automar2=setInterval("MarqueeLeft()",100);
}
function MarqueeLeft(){
if(left_bigBox.scrollLeft>=left_box2.offsetWidth)
left_bigBox.scrollLeft-=left_box1.offsetWidth;
else{
left_bigBox.scrollLeft++;
}
}
function ClearAuto2(){
clearInterval(automar2);
}
window.onload=function(){
//纵向滚动
AutoMar();
bigBox.onmouseover=ClearAuto;
bigBox.onmouseout=AutoMar;
//横向滚动
AutoMar2();
left_bigBox.onmouseover=ClearAuto2;
left_bigBox.onmouseout=AutoMar2;
}
</script>
</body>
</html>
