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)