『分享』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>


...全文
288 9 打赏 收藏 举报
写回复
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
peilanjiu 2009-12-25
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 zswang 的回复:]
效果不错
[/Quote]
jf
wangyuehong516 2009-12-25
  • 打赏
  • 举报
回复
接分
hookee 2009-12-25
  • 打赏
  • 举报
回复
~jF
keyake863 2009-12-25
  • 打赏
  • 举报
回复
沙发。。。
sohighthesky 2009-12-25
  • 打赏
  • 举报
回复
jf
Mirana_NightShade 2009-12-25
  • 打赏
  • 举报
回复
sf
道光2008 2009-12-25
  • 打赏
  • 举报
回复
1搬
王集鹄 2009-12-25
  • 打赏
  • 举报
回复
效果不错
王集鹄 2009-12-25
  • 打赏
  • 举报
回复
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-25 11:19
社区公告
暂无公告