『分享』js实现了一个图片的无缝滚动衔接，支持手动操作的例子。

keyake863 2009-12-25 11:19:38

这个可以左右滚动图片是无缝的，一次三张。不知道还有没有其它的更好的方法



<!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=gb2312" />

<title>图片滚动无缝衔接</title>

</head>



<body>

<table width="243px" border="0">

  <tr>

    <td><span onclick="pre();" style="cursor:pointer" id="pre"><<</span></td>

    <td><div id="cscroll" style="float:left;width:243px; overflow:hidden; height:93px; position:relative;z-index:2">

<table width="100%" border="0" id="tbcc">

  <tr>

    <td><div id="scroll1" style="width:243px;height:93px;float:left;"></div></td>

    <td><div id="scroll2" style="width:243px;height:93px;float:left;"></div></td>

    <td><div id="scroll3" style="width:243px;height:93px;float:left;"></div></td>

  </tr>

</table>

</div></td>

    <td><span onclick="next();"  style="cursor:pointer" id="next">>></span></td>

  </tr>

</table>





<script type="text/javascript">

function getXPosition(id){

	var e=document.getElementById(id);

	var x=e.offsetLeft;

	while(e=e.offsetParent){x+=e.offsetLeft;}

	return x;

}

var pianyi=getXPosition("tbcc");

var t1;

var nowsroll=1;

var imgs=new Array(8);

imgs[0]="http://img1.qq.com/news/pics/16678/16678931.jpg";

imgs[1]="http://img1.gtimg.com/comic/pics/25615/25615182.jpg";

imgs[2]="http://img1.gtimg.com/comic/pics/25332/25332016.jpg";

imgs[3]="http://img1.gtimg.com/comic/pics/25615/25615214.jpg";

imgs[4]="http://img1.gtimg.com/comic/pics/25615/25615217.jpg";

imgs[5]="http://img1.gtimg.com/comic/pics/25332/25332014.jpg";

imgs[6]="http://img1.qq.com/news/pics/16678/16678931.jpg";

imgs[7]="http://img1.gtimg.com/comic/pics/25615/25615214.jpg";

imgs[8]="http://img1.gtimg.com/comic/pics/25615/25615217.jpg";

var tabletop="<table style='width:100%'><tr>";

var tableend="</tr></table>";



function inidata()

{

	var t1=tabletop;

	var t2=tabletop;

	var t3=tabletop;

	for(i=((nowsroll-1)*3-3);i<((nowsroll-1)*3);i++)

	{

      var k=i;

      if(k<0){k=k+imgs.length}

	  t1+="<td><img  src="+imgs[k]+"  /></td>";

	}

	for(i=((nowsroll-1)*3);i<(((nowsroll-1)*3)+3);i++)

	{

	  t2+="<td><img src="+imgs[i]+"  /></td>";

	}

	for(i=((nowsroll-1)*3+3);i<((nowsroll-1)*3+6);i++)

	{

      var k=i;

      if(k>imgs.length-1){k=k-imgs.length}

	  t3+="<td><img src="+imgs[k]+"  /></td>";

	}

	t1+=tableend;

	t2+=tableend;

	t3+=tableend;

	document.getElementById("scroll1").innerHTML=t1;

	document.getElementById("scroll2").innerHTML=t2;

	document.getElementById("scroll3").innerHTML=t3;

    document.getElementById("cscroll").scrollLeft=getXPosition("scroll2")-pianyi;

}



function next()

{

	nowsroll+=1;

	if(nowsroll>3){nowsroll=1;}

	t1=window.setTimeout("changepa()",30);

}

function pre()

{

	nowsroll-=1;

	if(nowsroll<1){nowsroll=3;}

	t1=window.setTimeout("changepb()",30);

}

function changepa()

{

	window.clearTimeout(t1);

	if(document.getElementById("cscroll").scrollLeft>=getXPosition("scroll3")-pianyi){inidata();}

	else{document.getElementById("cscroll").scrollLeft+=10;t1=window.setTimeout("changepa()",30);}

}

function changepb()

{

	window.clearTimeout(t1);

	if(document.getElementById("cscroll").scrollLeft<=getXPosition("scroll1")-pianyi){inidata();}

	else{document.getElementById("cscroll").scrollLeft-=10;t1=window.setTimeout("changepb()",30);}

}

inidata();

</script>

</body>

</html>