原生js轮播特效怎么制作

a{text-decoration:none;color:#3DBBF5;}

*{

margin:0;

padding:0;

}

.wrapper{

width:400px;

height:300px;

margin:100pxauto;

}

#lunbo{

position:relative;

overflow:hidden;

}

#list{

position:relative;

white-space:nowrap; // 这块用行元素模拟，所以才用该属性，块元素可修改这块

}

#list span{

display: inline-block;

width:400px;

height:300px;

text-align:center;

line-height:300px;

font-weight:bold;

font-size:100px;

color:#fff;

}

#buttons{

position:absolute;

bottom:0;

text-align:center;

width:100%;

height:40px;

line-height:40px;

}

#buttons span{

display: inline-block;

width:15px;

height:5px;

background:#fff;

margin:010px;

cursor:pointer;

transition:all.5s;

}

#buttons span.on{

height:20px;

}

.arrow{

position:absolute;

top:50%;

transform: translateY(-50%);

font-size:80px;

font-weight:bold;

color:#fff;

opacity: .3;

transition:all.5s;

}

.wrapper:hover .arrow{

opacity:1;

}

#prev{

left:10px;

}

#next{

right:10px;

}

5123451

>

window.onload=function() {

varlunBo = document.getElementById("lunbo");

varlist = document.getElementById("list");

varbtn = document.getElementById("buttons").getElementsByTagName('span');

varprev = document.getElementById("prev");

varnext = document.getElementById('next');

varinterval = 3000;

vartimer;

varindex = 1;

varanimated =false;

for(vari=0;i

btn[i].onclick=function() {

if(this.className=='on')//如果是状态按钮直接返回节约资源

{

return

};

varmyIndex =parseInt(this.getAttribute('index'));//获取按钮的index属性值

varoffset = -400*(myIndex-index);//根据属性值 计算偏移量

animate(offset) //轮播动画

index = myIndex;// 改变索引值

showBtn(); //显示状态按钮

}

}

functionshowBtn () {

for(vari=0;i

btn[i].className=''

}

btn[index-1].className='on'

}

prev.onclick=function() {//上一页事件

if(animated) {//如果是动画状态 直接返回解决bug

return;

}

if(index==1) {

index =btn.length;

}else{

index-=1;

}

animate(400);

showBtn();

}

next.onclick=function() {

if(animated) {

return;

}

if(index==btn.length) {

index =1;

}else{

index+=1;

}

animate(-400);

showBtn();

}

functionanimate(offset) {

animated =true;//表示在动画状态

varnewLeft = parseInt(list.style.left) + offset;//计算新的left值

vartime = 400;//设置动画总时间

varinterval = 10;//动画帧时间

varspeed = offset/(time/interval);//每帧运动距离

functiongo () {

if((speed>0 && parseInt(list.style.left)newLeft)) {//通过条件判断到它是否还要继续进行动画

list.style.left = parseInt(list.style.left) + speed +'px'

setTimeout(go,interval)

}else{

animated =false;//动画状态结束

list.style.left = newLeft +'px'//现在的位移

if(parseInt(list.style.left)

list.style.left = -400 +'px'

}elseif( parseInt(list.style.left)>-400){

list.style.left = -2000 +'px'

}

}

}

go();

}

functionplay () {

timer = setTimeout(function() {

next.onclick();

play();

},interval)

}

play();

functionstop () {

clearTimeout(timer);

}

lunBo.onmouseover=stop;

lunBo.onmouseout=play;

}