无标题文章

Tween.js的无缝轮播。

*{

margin:0;

padding:0;

}          这里的内容是把网页默认的边距取消(一定不要忘记奥！！！！！！)

img{

width:600px;

height:300px;

}             给图片设置一个高    和   宽

li{

float:left;

width:600px;

height:300px;

}               给包容图片的父元素和图片的宽和高。

ul{

list-style:none;

width:2400px;

height:300px;

position:absolute;

}              紧邻的代码是把ul自带的小点去除掉    因为ul为父元素把所有的子元素包裹     给所有子元素一个浮动，因为子元素太多   父元素要包裹所有的，所以图片有几张   就让图片的宽乘于几      给ul设置绝对定位。

.box{

margin:20px auto;

width:600px;

height:300px;

position:relative;

box-shadow:0 5px10px aqua;

overflow:hidden;

}         最外层的容器包裹ul  设置和图片同样的宽和高    给盒子一个阴影（给不给都行）    

overflow:hidden;是让大于宽600px的内容隐藏

js的代码：

1.通过DOM操作获取UL

2.通过设置     t:初始步数    d：结束的步数  b初始位置      c移动距离(步数)

3.t=0,b=0,c= -600,d=100    --------t:初始步数    b初始位置     c相当于走了多少（距离）单位px     

4.给轮播一个定时器

eg：

varul=document.getElementsByTagName("ul")[0];

vart=0,b=0,c= -600,d=100

setInterval(function() {

vartem=setInterval(function() {

t+=2

if(t>=d) {

clearInterval(tem);

t=0;

b+=c;

if(b== -1800) {

b=0;

ul.style.left="0px"

}

}

ul.style.left=Tween.Bounce.easeOut(t,b,c,d) +"px"

},50)

},1500)