html图片轮播隐藏,CSS图片轮播显示问题

Title

*{

margin: 0;

padding:0;

}

ul{

list-style: none;

}

a{

text-decoration: none;

}

.wrapper{

width: 640px;

height: 368px;

margin: 50px auto;

position: relative;

}

.wrapper li{

position: absolute;

left: 0;

top:0;

}

.toggle{

width: 640px;

height: 368px;

}

.toggle span{

width: 30px;

height: 50px;

background:#FF9629;

position: absolute;

text-align: center;

line-height: 50px;

color: #fff;

font-size: 20px;

cursor: pointer;

/* display: none;*/

}

#prev{

top:159px;

}

#next{

top:159px;

right:0;

}

<

>

var list = document.getElementById("list");

var prev = document.getElementById("prev");

var next = document.getElementById("next");

function fn(ev) {

var nowLeft =parseInt(list.style.left)+ev;

list.style.left = nowLeft+"px";

}

prev.onclick = function () {

fn(640);

};

next.onclick = function () {

fn(-640);

};

我想问一下，为什么页面上显示的是最后一张图片在最上面，而不是第一张！