<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0 ;padding:0;}
#div1{width:520px; height:280px; position:relative; overflow:hidden; margin:50px auto;}
#ul1{position:absolute; left:0; top:0; }
#ul1 li{float:left; list-style:none; width:520px; height:280px;}
#span1{z-index:3;position:absolute; text-align:center;}
#span1 span{display:block; width:20px; height:20px;background:blue; color:white; margin:6px;}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
<div id="span1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<span id="prev">上张</span>
<span id="next">下账</span>
<script>
window.onload=function(){
var oPrev=document.getElementById(‘prev‘);
var oNext=document.getElementById(‘next‘);
var oUl=document.getElementById(‘ul1‘);
var oDiv=document.getElementById(‘div1‘);
var oSpanBox=document.getElementById(‘span1‘);
var oSpan=oSpanBox.getElementsByTagName(‘span‘);
var oLi=oUl.getElementsByTagName(‘li‘);
var oP=true;
oUl.style.width=oLi[0].offsetWidth*oLi.length+‘px‘;
function al(){oP=!oP}
for(var i=0; i<oLi.length;i++){
oSpan[i].index=i;
oSpan[i].onclick=function(){
startMove(oUl,{‘left‘:oLi[0].offsetWidth*this.index*-1})
}
}
oPrev.onclick=function(){
if(oUl.offsetLeft<0 && oP){
oP=!oP; //开关，防止连续点击错误
startMove(oUl,{‘left‘:oUl.offsetLeft+oLi[0].offsetWidth},al);
}else{
return false;
}
}
oNext.onclick=function(){
if(oUl.offsetLeft>-oLi[0].offsetWidth*(oLi.length)&&oP){
oP=!oP;
startMove(oUl,{‘left‘:oUl.offsetLeft-oLi[0].offsetWidth},al)
}else{
return false;
}
}
}
</script>
<script src="move.js"></script>
</body>
</html>
时间： 2024-10-24 12:33:42