无缝轮播_无缝轮播js原生代码

//先获取所需要的元素()//斜杠和括号内的是解释不是代码，不要犯傻 大佬勿看，容易气着

var wrap(包着ul的div) = document.querySelector('.wrap');

var oul = document.querySelector('ul');/这个是包着图片的无序列表

var next = document.querySelector(".next");

var prev = document.querySelector('.prev');

var oli = document.querySelectorAll('.oli');//这个获取的oul内的li

var btn = document.querySelectorAll('.tn');//这个获取的是小圆点

var index=0; //定义一个变量保存一个数这个数是为了和li的下标相对应

var olin = document.querySelectorAll('.oli')[0]

var olinow = olin.offsetWidth;//获取图片的宽度

wrap.appendChild(olin.cloneNode(true))

var timer = null//声明一个定时器

next.οnclick=function() {

index++

if(index==6){//这个根据你的图片个数来定我的有五张图片长度length就是五下标就是四

index = 1;//之前克隆了第一张图片并插入到

oul.style.left =0;

}

animate(oul,{left:index*-olinow},300)//这个是为了让oul的left值发生变化

for(var i=0;i<btn.length;i++){

btn[i].style.background='';

}

btn[index%5].style.background='red'

}

prev.οnclick=function() {

index--

if(index==-1){

index = 4

oul.style.left=-5*olinow+'px'

}

animate(oul,{left:index*-olinow},300)//animate是封装的运动框架

for(var i=0;i<btn.length;i++){

btn[i].style.background='';

}

btn[index%5].style.background='red'

}

timer = setInterval(next.onclick,2000)

wrap.οnmοuseenter=function(){

clearInterval(timer);

}

wrap.οnmοuseleave=function(){

timer = setInterval(next.onclick,2000)

}

//遍历btn给每一个tn上添加点击事件

for(var i=0;i<btn.length;i++){

btn[i].index = i

btn[i].οnclick=function(){

for(varj=0;j<btn.length;j++){

btn[j].style.background='';

}

this.style.background='red'

animate(oul,{left:this.index*-olinow},300)//animate是封装的运动框架

index = this.index

}

}