<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap {
width: 700px;
height: 220px;
overflow: hidden;
position: relative;
}
#slider {
position: absolute;
top: 0;
left: 0;
}
img {
float: left;
border: 0 none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
oPrev.onclick = prev;
oNext.onclick = next;
init();
//初始化图片src
function init() {
var oImg = document.getElementsByTagName('img');
for (var i = 0; i < oImg.length; i++) {
oImg[i].src = 'img/' + (i + 1) + '.jpg';
}
}
function next() {
var oSlider = document.getElementById('slider');
var top = getStyle(oSlider, 'top');
if (top == '-660px') {
oSlider.style.top = '0px';
} else {
//alert(top)
oSlider.style.top = parseInt(top) - 220 + 'px';
}
}
function prev() {
var oSlider = document.getElementById('slider');
var top = getStyle(oSlider, 'top');
if (top == '0px') {
oSlider.style.top = '-660px';
} else {
oSlider.style.top = parseInt(top) + 220 + 'px';
}
}
//获取非行内样式
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="slider">
<a href="#"><img src="img/1.jpg" /></a>
<a href="#"><img src="" /></a>
<a href="#"><img src="" /></a>
<a href="#"><img src="" /></a>
</div>
</div><br/>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</body>
</html>
