yahoo滑动效果如何实现?

Cyril_Tam 2008-12-03 04:36:06

看yahoo网址
http://shopping.yahoo.com/;_ylc=X3oDMTE5MGRqZDdoBF9TAzI3MTYxNDkEc2VjA2ZwLXRyb3VnaARzbGsDc3Bpcml0LWZpeGVk

打开网页后看右边, 有一个"Latest Coupons" 的框框, 框顶部有左右两个箭头, 点击右箭头时,框中内容滑动到第二页. 点击左箭头则返回第一页. 当页面到了尽头时,相应的左按钮或右按钮变灰,无法操作.(意思就是第一页时,左箭头是灰的,最后一页时,右箭头是灰的)

如何实现这个效果,高手请附代码,谢谢

...全文

193 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

aileen0617 2008-12-04

打赏
举报

mark

Cyril_Tam 2008-12-04

打赏
举报

顶上去, 有谁帮帮忙

jiang_jiajia10 2008-12-03

打赏
举报

网上有很多代码去找找就可以了

IMAGSE 2008-12-03

打赏
举报

友情帮顶~

Cyril_Tam 2008-12-03

打赏
举报

为什么换成文字后就不行了?? 点右按钮后会直接飞到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>

RJCHEN1985 2008-12-03

打赏
举报

<!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>