<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0px;
padding:0px;
}
#wrap {
width:200px;
height:200px;
position:absolute;
overflow:hidden;
}
#ul_box {
width:800px;
height:200px;
position:absolute;
list-style-type:none;
}
li {
float:left;
}
img {
width:200px;
}
</style>
</head>
<script src="tween.js"></script>
<body>
<div id="wrap">
<ul id="ul_box">
<li class="item">
<img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>
<li class="item">
<img src="98ad3f445b051290c49c09a63bfb6e36.jpg" /> </li>
<li class="item">
<img src="aac3722ea3b9c114028d6f9efa8fccdf.jpg" /> </li>
<li class="item">
<img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>
</ul>
</div>
<script>
var myUl= document.getElementById("ul_box");
var myLi = document.getElementsByClassName("item");
var t = 0;
var b = 0;//初始位置
var c = -200;
var d = 1000;
function lunbo() {
function run() {
t += 1;
myUl.style.left = Tween.Bounce.easeInOut(t, b, c, d) + "px";
if (t == d) {
clearInterval(timer);
t = 0;
b -= 200;
}
if (myUl.offsetLeft <-600) {
myUl.style.left = "0px";
b = 0;
}
}
var timer = setInterval(run, 10);
}
var bo = setInterval(lunbo, 4000);
</script>
</body>
</html>
