一般原因有下：
1，css没有被调用
2，css图片地址不对
3，div的高度没有固定，是auto或者没有设值
4，div被嵌套，
5，div代码不规范
CSS不能指定图片加载顺序，应该问的JS指定图片加载顺序。
javascript监听一个图片是否加载完毕 如果加载完成再加载下一张，不是一次性从服务器加载 减少服务器压力，
可用到的地方：比如制作类似google地图的应用，可以使小图一张一张的加载。
function Load_pic(arr){ //这里接受的图片的所以链接数组。this.loop_f=function(i,o_file,len,f,obj){
if(i<len-1){
i=i+1
f(i,o_file,len,obj)
}
}
this.creat_pic=function(i,o_file,len,obj){
var f=arguments.callee,
doc=document,
image = doc.createElement("img")
image.src =o_file[i]
i<len?doc.getElementsByTagName("body")[0].appendChild(image):''
if(navigator.userAgent.indexOf("MSIE")>0){ //是IE浏览器
if($.browser.version==6.0 || $.browser.version==9.0){ //IE兼容处理。
image.onreadystatechange = function () {
if (image.readyState == "complete"){ //image 加载完后，函数回调。
obj.loop_f(i,o_file,len,f,obj)
}
}
}else{ //非IE7和IE9的IE浏览器。
ie7imagetime = window.setInterval(function(){
var rs = image.readyState
if(rs=="complete"){
window.clearInterval(ie7imagetime)
obj.loop_f(i,o_file,len,f,obj)
}else{
return
}
},200)
}
}else{ //非IE浏览器，直接用onload事件
image.onload = function () {
if (image.complete == true){
obj.loop_f(i,o_file,len,f,obj)
}
}
}
}
if(arr.constructor===Array){ //函数开始执行的地方。
var len=arr.length,
i=0
i<len?this.creat_pic(i,arr,len,this):''
}
}
ul里面的元素li不浮动的话，它就能自适应高度，DIV也一样。块内的滚动效果有JS自定的和marquee两种：<marquee>中也可以放图片和文字，它不是无缝连接的滚动。js滚动用的比较多一点： <style type="text/css">/* Scroll */#MarqueeImg {padding: 0pxheight: 116pxwidth: 716pxoverflow: hiddenmargin: 0px}
*html #MarqueeImg {width:714px}/*For IE6 Only*/
#MarqueeImg #ScrollBox {width: 1650pxoverflow: hidden}
#MarqueeImg #ScrollDiv1,.Doc .Main .Con .Content #MarqueeImg #ScrollDiv2 {width: 798pxfloat: left}
#MarqueeImg .ScrollPhoto {float: leftpadding: 0pxmargin: 0px}
#MarqueeImg .ScrollPhoto dt {text-align: centerwidth:133px /*6%*/float: left}
#MarqueeImg .ScrollPhoto dt img {border: 1px solid #B8A867margin: 0pxpadding: 1px}
#MarqueeImg .ScrollPhoto dt div {width: 122pxmargin-top: 0pxmargin-right: automargin-bottom: 0pxmargin-left: autopadding: 0pxheight: 17px}</style><div id="MarqueeImg">
<div id="ScrollBox">
<div id="ScrollDiv1">
<dl class="ScrollPhoto">
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">xxxxxxxx</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">yyyyyyy</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准Last</a></div>
</dt>
</dl>
</div>
<div id="ScrollDiv2"></div>
</div>
</div>
<script type="text/javascript">
<!--//
var obj = function(id){return document.getElementById(id)}
var speed = 2
obj("ScrollDiv2").innerHTML = obj("ScrollDiv1").innerHTML
function Marquee(){
if(obj("MarqueeImg").scrollLeft >= obj("ScrollDiv1").scrollWidth){
obj("MarqueeImg").scrollLeft = 0
}else{
obj("MarqueeImg").scrollLeft ++
}
}
var MyMar = setInterval(Marquee,speed)
obj("MarqueeImg").onmouseover = function(){clearInterval(MyMar)}
obj("MarqueeImg").onmouseout = function(){MyMar=setInterval(Marquee,speed)}
//-->
</script>
需要CSS与JS配合了！！研究下CSS，如果内容要加，CSS的总宽度也要增加。
