<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">
.wrap{
320px;
height:50px;
overflow: hidden;
margin:0 auto;
margin-top:50px;
position: relative;
}
.wrap ul{
position: absolute;
overflow: hidden;
padding:0px;
margin:0;
}
.wrap ul li{
100px;
height:50px;
float: left;
line-height: 50px;
text-align:center;
background:orange;
font-size: 16px;
margin-right: 10px;
color:#fff;
list-style-type: none;
}
</style>
<body>
<input type="button" value ="我要切" id="tab">
<div class="wrap" id="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="startMove.js"></script>
<script type="text/javascript">
window.onload = function(){
var iNum = 3;
var oBtn = document.getElementById('tab');
var wrap = document.getElementById('wrap');
var oUl = wrap.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oSize = parseInt(getStyle(aLi[0],'marginRight')) + parseInt(getStyle(aLi[0],'width'));
function getWidth(){
oUl.style.width = aLi.length * oSize +'px';
}
getWidth();
//移动函数
alert(startMove)
function slider(){
for (i = 0; i< iNum ;i++){
var oLi = aLi[i].cloneNode(true);
oUl.appendChild(oLi);
getWidth();
}
startMove(oUl,{left : -iNum * oSize},function(){
for( i = 0; i< iNum ; i++){
oUl.removeChild(oLi[0]);
oUl.tyle.left = 0 +'px';
}
});
};
//触发
oBtn.onclick = function(){
slider();
};
};
</script>