下面这样家在多个图片 但是图片会在超出父div高度或宽度的时候 只增加scrollTop 而不增加scrollLeft因为文字可以撑大scrollLeft
所以用了display:inline; float:left;试了试都不行不撑大scrollLeft 就不能实现滚动
请问大家都怎么解决的啊????
<style>
#b{
float:left;
}
a,img{
display:inline;
}
</style>
<div id=a style="width:400px;height:100px;background:red;overflow:scroll">
<a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a>
<a href="#"><img width="68" height="68" src="../2.jpg"/></a>
<a href="#"><img width="68" height="68" src="../3.jpg"/></a>
<a href="#"><img width="68" height="68" src="../4.jpg"/></a>
<a href="#"><img width="68" height="68" src="../5.jpg"/></a>
<a href="#"><img width="68" height="68" src="../6.jpg"/></a>
<a href="#"><img width="68" height="68" src="../7.jpg"/></a> </div>
<script>
var a=document.getElementById("a");
var c=function(){
for(var i=1;i<500;i++)document.getElementById("a").scrollLeft++;
}
a.onclick=c//点红方块一下 ie和ff速度不一样
</script>
所以用了display:inline; float:left;试了试都不行不撑大scrollLeft 就不能实现滚动
请问大家都怎么解决的啊????
<style>
#b{
float:left;
}
a,img{
display:inline;
}
</style>
<div id=a style="width:400px;height:100px;background:red;overflow:scroll">
<a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a>
<a href="#"><img width="68" height="68" src="../2.jpg"/></a>
<a href="#"><img width="68" height="68" src="../3.jpg"/></a>
<a href="#"><img width="68" height="68" src="../4.jpg"/></a>
<a href="#"><img width="68" height="68" src="../5.jpg"/></a>
<a href="#"><img width="68" height="68" src="../6.jpg"/></a>
<a href="#"><img width="68" height="68" src="../7.jpg"/></a> </div>
<script>
var a=document.getElementById("a");
var c=function(){
for(var i=1;i<500;i++)document.getElementById("a").scrollLeft++;
}
a.onclick=c//点红方块一下 ie和ff速度不一样
</script>
<table>
<tr>
<td><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../2.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../3.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../4.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../5.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../6.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../7.jpg"/></a></td>
</tr>
</table>
<tr style="width:100px;overflow:scroll">
<td><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../2.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../3.jpg"/></a></td>
<td style="display:none"><a href="#"><img width="68" height="68" src="../4.jpg"/></a></td>
<td style="display:none"><a href="#"><img width="68" height="68" src="../5.jpg"/></a></td>
<td style="display:none"><a href="#"><img width="68" height="68" src="../6.jpg"/></a></td>
<td style="display:none"><a href="#"><img width="68" height="68" src="../7.jpg"/></a></td> </tr>
</table>虽然可以使用display之显示部分图片但是这样怎么让其滚动啊?? 因为没有形成滚动条 怎么滚动???
<style>
#b{
float:left;
}
a,img{
display:inline;
}
</style>
<div id=a style="width:400px;height:100px;background:red;overflow:scroll">
<table>
<tr>
<td><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../2.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../3.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../4.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../5.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../6.jpg"/></a></td>
<td><a href="#"><img width="68" height="68" src="../7.jpg"/></a></td>
</tr>
</table>
</div>
<script>
var a=document.getElementById("a");
var c=function(){
for(var i=1;i<500;i++)document.getElementById("a").scrollLeft++;
}
a.onclick=c//点红方块一下 ie和ff速度不一样
</script>
我的可是2g的内存啊 ie下很正常 ff下卡成这样 可不行啊
<style>
ul,ul li{margin:0;padding:0;display:inline;float:left;}
ul{height:100px;width:504px;}
</style>
<div id=a style="width:400px;height:100px;background:red;overflow:scroll;overflow-y:hidden">
<ul>
<li><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></li>
<li><a href="#"><img width="68" height="68" src="../2.jpg"/></a></li>
<li><a href="#"><img width="68" height="68" src="../3.jpg"/></a></li>
<li><a href="#"><img width="68" height="68" src="../4.jpg"/></a></li>
<li><a href="#"><img width="68" height="68" src="../5.jpg"/></a></li>
<li><a href="#"><img width="68" height="68" src="../6.jpg"/></a></li>
<li><a href="#"><img width="68" height="68" src="../7.jpg"/></a></li>
</ul>
</div>
<script>
var a=document.getElementById("a");
var c=function(){
for(var i=1;i<500;i++)document.getElementById("a").scrollLeft++;
}
a.onclick=c//点红方块一下 ie和ff速度不一样
</script>
<div class="clip">
<div id="thumblist" style="left: 0px;">
<a id=ss onclick="" href="#"><span><img width="68" height="68" alt="谭盾" src="../1.jpg"/></span>谭盾</a>
<a id=ss onclick="" href="#"><span><img width="68" height="68" alt="谭盾" src="../1.jpg"/></span>谭盾</a>
<a id=ss onclick="" href="#"><span><img width="68" height="68" alt="谭盾" src="../1.jpg"/></span>谭盾</a>
</div>
</div>