想实现两行图片滚动显示,但是一行可以实现,同样的代码第二行就不动了不知道是为什么?
<!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" />
<link href="css/reset.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/Choose.js"></script>
<title>首页--test</title>
</head>
<body>
<div id="wrapper">
<div class="clearfloat"></div>
<div class="clearfloat"></div>
<!--供求信息栏目开始-->
<div class="col_btm">
<div class="col_btm_tit">
<span>供求信息</span>
<ul>
<li id="btmcol0" class="onbottom" onmousemove="setTab('btmcol',0,2)">外贸</li>
<li id="btmcol1" class="onbottom" onmousemove="setTab('btmcol',1,2)">内贸</li>
</ul>
</div>
<div id="con_btmcol_0" class="col_btm_con">
<div class="col_btm_subtit" >
<ul>
<li id="btmsub10" class="onsub" onmousemove="setTab('btmsub1',0,2)">出口</li>
<li id="btmsub11" onmousemove="setTab('btmsub1',1,2)">进口</li>
</ul>
</div>
<div class="marquee">
<div class="marquee_left">
<img src="images/swf_leftPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToLeft();" />
</div>
<div class="marquee_right">
<img src="images/swf_rightPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToRight();" />
</div>
<input type="hidden" name="marquee_type" id="marquee_type" value="left" />
<div class="marquee_middle">
<div id="run" class="marquee_run">
<table>
<tr>
<td id="td1">
<table id="con_btmsub1_0">
<tr>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
</tr>
</table>
<table id="con_btmsub1_1" style="display:none;">
<tr>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
</tr>
</table>
<td id="td2"></td>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="con_btmcol_1" class="col_btm_con">
<div class="col_btm_subtit">
<ul>
<li id="btmsub20" class="onsub" onmousemove="setTab('btmsub2',0,2)">求购</li>
<li id="btmsub21" onmousemove="setTab('btmsub2',1,2)">供应</li>
</ul>
</div>
</div>
<div class="marquee">
<div class="marquee_left">
<img src="images/swf_leftPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToLeft();" />
</div>
<div class="marquee_right">
<img src="images/swf_rightPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToRight();" />
</div>
<input type="hidden" name="marquee_type" id="marquee_type" value="left" />
<div class="marquee_middle">
<div id="run" class="marquee_run">
<table>
<tr>
<td id="td3">
<table id="con_btmsub2_0">
<tr>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
</tr>
</table>
<table id="con_btmsub2_1" style="display:none;">
<tr>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
</tr>
</table>
<td id="td4"></td>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--供求信息栏目结束-->
</div>
<!--内容结束-->
<!--尾部开始-->
<div id="footer"> <div class="clearfloat"></div>
</div></div>
<script type="text/javascript">
var sh;
var marquee_type = document.getElementById("marquee_type").value;
var lk1 = document.getElementById("td1","td3");
var lk2 = document.getElementById("td2","td4");
var marquee_run = document.getElementById("run");
var speed = 30;
function scrollToLeft()
{
clearInterval( sh );
marquee_type = "left";
lk2.innerHTML = lk1.innerHTML;
function Marquee1(){
if(lk2.offsetWidth - marquee_run.scrollLeft <= 0)
marquee_run.scrollLeft -= lk1.offsetWidth;
else{
marquee_run.scrollLeft ++;
}
}
sh = setInterval(Marquee1,speed);
}
function scrollToRight()
{
clearInterval( sh );
marquee_type = "right";
function Marquee2(){
if(marquee_run.scrollLeft <= 0)
marquee_run.scrollLeft += lk1.offsetWidth;
else{
marquee_run.scrollLeft --;
}
}
sh = setInterval(Marquee2,speed);
}
marquee_run.onmouseover=function() {clearInterval(sh);}
marquee_run.onmouseout=function() {
if(marquee_type == "left"){
scrollToLeft();
}else if(marquee_type == "right"){
scrollToRight();
}
}
</script>
</body>
</html>
<!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" />
<link href="css/reset.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/Choose.js"></script>
<title>首页--test</title>
</head>
<body>
<div id="wrapper">
<div class="clearfloat"></div>
<div class="clearfloat"></div>
<!--供求信息栏目开始-->
<div class="col_btm">
<div class="col_btm_tit">
<span>供求信息</span>
<ul>
<li id="btmcol0" class="onbottom" onmousemove="setTab('btmcol',0,2)">外贸</li>
<li id="btmcol1" class="onbottom" onmousemove="setTab('btmcol',1,2)">内贸</li>
</ul>
</div>
<div id="con_btmcol_0" class="col_btm_con">
<div class="col_btm_subtit" >
<ul>
<li id="btmsub10" class="onsub" onmousemove="setTab('btmsub1',0,2)">出口</li>
<li id="btmsub11" onmousemove="setTab('btmsub1',1,2)">进口</li>
</ul>
</div>
<div class="marquee">
<div class="marquee_left">
<img src="images/swf_leftPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToLeft();" />
</div>
<div class="marquee_right">
<img src="images/swf_rightPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToRight();" />
</div>
<input type="hidden" name="marquee_type" id="marquee_type" value="left" />
<div class="marquee_middle">
<div id="run" class="marquee_run">
<table>
<tr>
<td id="td1">
<table id="con_btmsub1_0">
<tr>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
</tr>
</table>
<table id="con_btmsub1_1" style="display:none;">
<tr>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
</tr>
</table>
<td id="td2"></td>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="con_btmcol_1" class="col_btm_con">
<div class="col_btm_subtit">
<ul>
<li id="btmsub20" class="onsub" onmousemove="setTab('btmsub2',0,2)">求购</li>
<li id="btmsub21" onmousemove="setTab('btmsub2',1,2)">供应</li>
</ul>
</div>
</div>
<div class="marquee">
<div class="marquee_left">
<img src="images/swf_leftPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToLeft();" />
</div>
<div class="marquee_right">
<img src="images/swf_rightPointer.jpg" width="13" height="93" onMouseOver="javascript:scrollToRight();" />
</div>
<input type="hidden" name="marquee_type" id="marquee_type" value="left" />
<div class="marquee_middle">
<div id="run" class="marquee_run">
<table>
<tr>
<td id="td3">
<table id="con_btmsub2_0">
<tr>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
</tr>
</table>
<table id="con_btmsub2_1" style="display:none;">
<tr>
<td><a href="#"><img src="images/swf_pic1.jpg" width="135" height="84" /></a></br><a href="#">1</a></td>
<td><a href="#"><img src="images/swf_pic2.jpg" width="135" height="84" /></a></br><a href="#">2</a></td>
<td><a href="#"><img src="images/swf_pic3.jpg" width="135" height="84" /></a></br><a href="#">3</a></td>
<td><a href="#"><img src="images/swf_pic4.jpg" width="135" height="84" /></a></br><a href="#">4</a></td>
<td><a href="#"><img src="images/swf_pic5.jpg" width="135" height="84" /></a></br><a href="#">5</a></td>
<td><a href="#"><img src="images/swf_pic6.jpg" width="135" height="84" /></a></br><a href="#">6</a></td>
</tr>
</table>
<td id="td4"></td>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--供求信息栏目结束-->
</div>
<!--内容结束-->
<!--尾部开始-->
<div id="footer"> <div class="clearfloat"></div>
</div></div>
<script type="text/javascript">
var sh;
var marquee_type = document.getElementById("marquee_type").value;
var lk1 = document.getElementById("td1","td3");
var lk2 = document.getElementById("td2","td4");
var marquee_run = document.getElementById("run");
var speed = 30;
function scrollToLeft()
{
clearInterval( sh );
marquee_type = "left";
lk2.innerHTML = lk1.innerHTML;
function Marquee1(){
if(lk2.offsetWidth - marquee_run.scrollLeft <= 0)
marquee_run.scrollLeft -= lk1.offsetWidth;
else{
marquee_run.scrollLeft ++;
}
}
sh = setInterval(Marquee1,speed);
}
function scrollToRight()
{
clearInterval( sh );
marquee_type = "right";
function Marquee2(){
if(marquee_run.scrollLeft <= 0)
marquee_run.scrollLeft += lk1.offsetWidth;
else{
marquee_run.scrollLeft --;
}
}
sh = setInterval(Marquee2,speed);
}
marquee_run.onmouseover=function() {clearInterval(sh);}
marquee_run.onmouseout=function() {
if(marquee_type == "left"){
scrollToLeft();
}else if(marquee_type == "right"){
scrollToRight();
}
}
</script>
</body>
</html>
的确。。你可以自己学着去慢慢DEBUG