用javascript如何制作图片滚动 10
我想用javascript做一个想新浪图库的效果，点击“左”图片向左滚动，点击“右”类似。我看了一些相关的帖子，他们都采用了类似的代码<style>*{padding:0...
我想用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> 展开
我看了一些相关的帖子，他们都采用了类似的代码
<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> 展开
4个回答
展开全部
document.getElementById("smallDiv").style.left应该是document.getElementById("smallDiv").style.pixelLeft（注意大小写）
最好用scrollLeft比如document.getElementById("smallDiv").scrollLeft = 55;
滚动起来卡顿现象好点
我不知道上面是不是你的全部代码，反正相应的onclick要加的
最好用scrollLeft比如document.getElementById("smallDiv").scrollLeft = 55;
滚动起来卡顿现象好点
我不知道上面是不是你的全部代码，反正相应的onclick要加的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要根据图片大小调整div的大小。你滚动的效果能实现，只是div不能完整显示你的图片。调整下div大小好了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
图片滚动组件最好使用已经成型的，可以保证浏览器兼容性，这里有一款jquery组件jcarousel还是很好用的，可以满足你的需要了。
参考资料： http://sorgalla.com/projects/jcarousel/
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#smallDiv{
position:relative;
overflow:hidden;
height:120px;
}
把上面这块的overflow:hidden;
改成 overflow:inherit;
position:relative;
overflow:hidden;
height:120px;
}
把上面这块的overflow:hidden;
改成 overflow:inherit;
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
