图片滚动问题(JS+CSS)

Question

'滚动显示热卖产品图片
'totalcount  全部图片数量
'percount 每次显示图片数量
'picHeight   图片高度
sub showHotPics(totalcount,percount,picHeight)
set rsHotPics=Server.CreateObject("adodb.recordset")
sql="select top "&totalcount&" id,title,pic from cjq_pro where hot=true"
rsHotPics.open sql,conn,1,1
%>

<div id="container" style="width:100%;height:<%=(picHeight+10)*percount+10%>px;overflow:hidden; padding:0px;">
<div id="pics" style="position:absolute;left:0px;top:0px; padding:0px;">

<%
do while not rsHotPics.eof 
%>
<div style="margin:10px; padding:0px;">
<img height="<%=picHeight%>px" alt="<%=rsHotPics("title")%>" src="<%=rsHotPics("pic")%>" border="0px"/>
</div>
<%
rsHotPics.movenext
loop
rsHotPics.close

%>
</div>
</div>
<script language="javascript">
function movePics()
{

divPics.style.pixelTop-=(<%=picHeight%>+10)/10;
if(newTop>=divPics.style.pixelTop)
{

clearInterval(scrollTimer);

}
}
function chgPics()
{
newTop=divPics.style.pixelTop-(<%=picHeight%>+10);

if(newTop<-divPics.scrollHeight)
{

divPics.style.pixelTop=divContainer.style.pixelHeight;
}
else
{

scrollTimer=window.setInterval("movePics();",100);


}

}
var divPics=document.getElementById("pics");
var divContainer=document.getElementById("container");
var newTop,scrollTimer;
window.setInterval("chgPics()",5000);
</script>
<%
end sub

Answer 1

问题不大,把中间的代码里的换行都去掉就可以了
<div style="margin:10px; padding:0px;"><img height="150px" alt="jordan 1" src="uploadfiles/200722616322531.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="jordan 1 001" src="uploadfiles/2007226163234872.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="jordan 1 002" src="uploadfiles/2007226163743771.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="jordan 1 009" src="uploadfiles/2007226164241395.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="jordan 3 015" src="uploadfiles/20072262247294.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="BAPE-HOODY 001" src="uploadfiles/200722719404486.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="BAPE-HOODY 002" src="uploadfiles/2007227202521652.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="BAPE-HOODY 003" src="uploadfiles/2007227202817118.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="BAPE-HOODY 004" src="uploadfiles/2007227202911812.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="BAPE-HOODY 005" src="uploadfiles/2007227203033684.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="BAPE-HOODY 006" src="uploadfiles/2007227203137652.jpg" border="0px"/></div>
<div style="margin:10px; padding:0px;"><img height="150px" alt="BAPE-HOODY 007" src="uploadfiles/2007227203245200.jpg" border="0px"/></div>不去掉换行,div的offsetHeight是176,去掉后是170,上个margin:10px,正好div图片是150

Answer 2

你按两种写法,分别alert一下div.childNodes.length就知道了,换行空格后,会多子元素的