yahoo滑动效果如何实现?

高手能否整理一下,就做成yahoo的效果. 给段完整点的代码(DIV和JS),非常感谢~~~

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
  <TITLE> New Document </TITLE>

</HEAD> <BODY>
<input type="button" value="向左" onclick="left()" id="lBut" disabled="disabled" /><input type="button" value="向右" onclick="right()" id="rBut" />
   <div id="div1" style="width:757px; height:480px; overflow:hidden"></div>
    <div id="div2" style="display:none">
    <table>
     <tr>
         <td><img src="iwode/shopPic/1.jpg" width="757" /></td>
<td><img src="iwode/shopPic/2.jpg" width="757" /></td>
            <td><img src="iwode/shopPic/3.jpg" width="757" /></td>
        </tr>
    </table>
    </div>
</BODY>
</html>
<script>
var myInt = null;
var count = 0;
var moveLength = [75,75,75,75,75,75,75,75,75,82];
var curPage = 1;
document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
function move(){
if(myInt != null){
document.getElementById("div1").scrollLeft+=moveLength[count];
count++;
if(count==10){
count = 0;
curPage++;
if(curPage>1){
document.getElementById("lBut").disabled = "";
}
if(curPage==3){
document.getElementById("rBut").disabled = "disabled";
}
clearInterval(myInt);
}
}
}
function moveLeft(){
if(myInt != null){
document.getElementById("div1").scrollLeft-=moveLength[count];
count++;
if(count==10){
count = 0;
curPage--;
if(curPage<3){
document.getElementById("rBut").disabled = "";
}
if(curPage==1){
document.getElementById("lBut").disabled = "disabled";
}
clearInterval(myInt);
}
}
}
function left(){
if(myInt != null){
clearInterval(myInt);
}
myInt = setInterval("moveLeft();",50);
}
function right(){
if(myInt != null){
clearInterval(myInt);
}
myInt = setInterval("move();",50);
}
</script>
为什么换成文字后就不行了?? 点右按钮后会直接飞到333333去了...高手帮帮忙...谢谢只需要做到和yahoo一样就行, 样子不用管~<!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>
  <TITLE> New Document </TITLE>

</HEAD> <BODY>
<input type="button" value="向左" onclick="left()" id="lBut" disabled="disabled" /> <input type="button" value="向右" onclick="right()" id="rBut" />
  <div id="div1" style="width:150px; height:200px; overflow:hidden"> </div>
    <div id="div2" style="display:none">
    <table>
    <tr>
        <td>
<table width="150px" height="200px" border="1">
<tr>
<td>11111111</td>
</tr>
</table>
</td>
<td>
<table width="150px" height="200px" border="1">
<tr>
<td>22222222</td>
</tr>
</table>
</td>
<td>
<table width="150px" height="200px" border="1">
<tr>
<td>33333333</td>
</tr>
</table>
</td>
     </tr>
    </table>
    </div>
</BODY>
</html>
<script>
var myInt = null;
var count = 0;
var moveLength = [75,75,75,75,75,75,75,75,75,82];
var curPage = 1;
document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
function move(){
if(myInt != null){
document.getElementById("div1").scrollLeft+=moveLength[count];
count++;
if(count==10){
count = 0;
curPage++;
if(curPage>1){
document.getElementById("lBut").disabled = "";
}
if(curPage==3){
document.getElementById("rBut").disabled = "disabled";
}
clearInterval(myInt);
}
}
}
function moveLeft(){
if(myInt != null){
document.getElementById("div1").scrollLeft-=moveLength[count];
count++;
if(count==10){
count = 0;
curPage--;
if(curPage <3){
document.getElementById("rBut").disabled = "";
}
if(curPage==1){
document.getElementById("lBut").disabled = "disabled";
}
clearInterval(myInt);
}
}
}
function left(){
if(myInt != null){
clearInterval(myInt);
}
myInt = setInterval("moveLeft();",50);
}
function right(){
if(myInt != null){
clearInterval(myInt);
}
myInt = setInterval("move();",50);
}
</script>