用javascript如何制作图片滚动

sorry7266511 2011-12-30 03:49:05

我想用javascript做一个想新浪图库的效果，点击“左”图片向左滚动，点击“右”类似。
我看了一些相关的帖子，他们都采用了类似的代码
<style>
*{
padding:0px;
margin:0px;
}
#bigDiv{
width:200px;
background-color:red;
overflow:hidden;
height:120px;

}
#smallDiv{
position:relative;
overflow:hidden;
height:120px;
}

#imgul{
position:absolute;
width:1020px;
height:120px;
vertical-align:middle;
line-height:120px;
}
.imgcontent{
width:120px;
text-align:center;
list-style-type:none;
float:left;
}
</style>

</head>

<body>
<div id="bigDiv">
<div id="smallDiv">
<ul id="imgul">
<li class="imgcontent"><img src="a.jpg" width="100" height="100" /></li>
<li class="imgcontent"><img src="b.jpg" width="100" height="100" /></li>
<li class="imgcontent"><img src="c.jpg" width="100" height="100" /></li>
<li class="imgcontent"><img src="d.jpg" width="100" height="100" /></li>
</ul>
</div>
</div>
问题是，我的图片只显示4个图中的一部分，也就是说，当你点击“左”的时候，超出bigDiv和smallDiv的图片都不显示了，请问如何解决这一问题。下面是我的javascript代码，配合上面的html一起使用
<script language="javascript">
function goleft(){
document.getElementById("smallDiv").style.left=document.getElementById("smallDiv").offsetLeft-100+"px";
}

function goright(){
document.getElementById("smallDiv").style.left=document.getElementById("smallDiv").offsetLeft+100+"px";
}
</script>

...全文

241 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

sorry7266511 2011-12-30

打赏
举报

谢谢luliangshu350，在你的提示下，问题解决了。
总结：
做一个大div，限定他的尺寸，并隐藏超出范围的内容
在大div中建立一个小div，在其中放入想要展示的全部图片。我的错误在于：在小div中也采用了
overflow：hidden。小div中要能使所有的图片都能显示。大div的作用就像是flash中的遮罩层

由于大div采用了overflow:hidden所有只有小div中的部分图片可以被显示。
这是，我们在采用javascript移动小div，就实现了点一下按钮，图片向某个方向移动一下的效果。

luliangshu350 2011-12-30

打赏
举报

#smallDiv{
position:relative;
height:120px;
}

改成这个你把超出部分隐藏了所以看不见了

sorry7266511 2011-12-30

打赏
举报

谢谢楼上的回答。你所说的是无缝滚动的图片效果。而我想要的是：多张图片在一个有限的元素中显示（部分能看见，部分隐藏在元素的外面看不见），点击向左按钮，图片向左移动一点，点击向右按钮，图片向右移动一点。
问题是：我点击向左按钮，图片能实现滚动，但是只是最初显示的那部分图片在滚动，原先利用overflow:hidden隐藏的图片仍然看不见，为何啊！？
请大家帮忙，谢谢！

luliangshu350 2011-12-30

打赏
举报



<ul id="imgul">

  <li class="imgcontent"><img src="a.jpg" width="100" height="100" /></li>

  <li class="imgcontent"><img src="b.jpg" width="100" height="100" /></li>

  <li class="imgcontent"><img src="c.jpg" width="100" height="100" /></li>

  <li class="imgcontent"><img src="d.jpg" width="100" height="100" /></li>

  </ul>

  <ul id="imgul2"></ul>

可以这样复制一份在JS取得第二个ul的id后
imgul2 .innerHTML = imgul.innerHTML;
这样当你实际上你图片就有8张了。。第一张和第五张是一样的。。依次类推第二张和第六张。
这样当你点击的时候看起来就不会断了就接上了。当你想一直循环他的值的时候就要在第五章的时候把滚动值变成0这样他看起来就是一直在循环了。实际上第6 7 8没有执行只是让你看起来他在做循环。