图片轮换的显示问题

图片A的宽是780px；问题是:在页面加载的时候显示的是图片B和图片C，其中B和C都是图片A的前半部分，也就是两个图片A的前半部分占了整个图片A的宽显示出来，请问怎么才能在加载的时候正常显示整个图片A，高手请解答 谢谢 急！<style type="text/css">
#album {
position:relative;
width:780px;
height:80px;
border:1px solid #8080C0;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:80px;
width:780px;
overflow:hidden;
background:transparent url('images/guanggao/shangcheng.gif');
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url('images/guanggao/o_button[1].gif') no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var easeInOutCubic= function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
}
var transition = function(el){
var options = arguments[1] || {},
begin =  options.begin,//开始位置
change = options.change,//变化量
duration = options.duration || 500,//缓动效果持续时间
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的缓动公式
end = begin + change,//结束位置
startTime = new Date().getTime();//开始执行的时间
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//当前帧开始的时间
timestamp = newTime - startTime,//逝去时间
delta = ease(timestamp / duration);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
images = slide.getElementsByTagName("img"),
length = links.length, aBefore = length, aIndex;
slide.innerHTML += slide.innerHTML;
var tip = document.createElement("li");
tip.style.cssText = "position:absolute;bottom:-40px;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.color = "#369";
tip.style.filter = "alpha(opacity=67)"
}else{
tip.style.cssText += "background: rgba(164, 173, 183, .65);"
}
var item  = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,//临界值
distance = critical/length,
delta = - distance;
(function(){//实现自动轮换图片
setTimeout(function(){
delta = delta - distance;
if(delta <  -critical){
delta = - distance;
}
aIndex = - delta/distance;
tip.innerHTML = images[aIndex-1].getAttribute("alt");
tip.style.bottom = "-40px";
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
transition(slide,{begin:delta,change:distance,ease:easeInOutCubic,onEnd:function(){
move(tip);
}})
setTimeout(arguments.callee,5000)
},5000)
})()
}
var move = function(el){
var begin = parseFloat(el.style.bottom),speed = 1;
el.bottom = begin;
(function(){
setTimeout(function(){
el.style.bottom = el.bottom + speed + "px";//移动
el.bottom += speed;
speed *= 1.5;//下一次移动的距离
if(el.bottom >= 0){
el.style.bottom = "0px";
}else{
setTimeout(arguments.callee,25);//每移动一次停留25毫秒
}
},25)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<div id="album">
<ul>
<li>
<a href="http://www.hao123.com" id="index1">
<img alt="123" src="images/guanggao/shangcheng.gif" />
</a>
<a href="http://www.hao123.com" id="index2">
<img alt="123" src="images/guanggao/2.gif" />
</a>
<a href="http://www.hao123.com" id="index3">
<img alt="123" src="images/guanggao/3.gif" />
</a>
</li>
</ul>
<span>
<a href="#index1">1</a>
<a href="#index2">2</a>
<a href="#index3">3</a>
</span>
</div>