无缝轮播图的实现js

无缝轮播图

class lunbo{
constructor(){
// 选择元素；
this.imgbox = document.getElementById(“imgbox”);
this.child = this.imgbox.children;
this.left = document.getElementById(“left”);
this.right = document.getElementById(“right”);
this.index = 0;
}
// 完善布局
Sty(){
this.imgbox.style.width = this.child.lengththis.child[0].offsetWidth + “px”;
}
// 绑定事件
shijian(){
var that = this;
this.left.onclick = function() {
that.chageindex(1);
}
this.right.onclick = function () {
that.chageindex(2);
}
}
// 改变索引
chageindex(d){
if (d==1) {
if (this.index == 0) {
this.index = this.child.length - 2;
this.imgbox.style.left = this.child[0].offsetWidth * -(this.child.length-1) + “px”;
} else {
this.index–;
}
} else {
if (this.index ==this.child.length-1) {
this.index = 1;
this.imgbox.style.left = 0;
} else {
this.index++;
}
}
this.Move();
}
// 动起来
Move(){
move(this.imgbox,“left”,-this.indexthis.child[0].offsetWidth);
}
}
var b =new lunbo();
b.Sty();
b.shijian();
// 运动的封装
var t;
function move(ele,attr,target) {
clearInterval(t);
t = setInterval(function() {
// 获取元素样式
var sty = getStyle(ele,attr);
// 借助parseint 去掉单位“px”
var now = parseInt(sty);
// 为了设置缓冲效果
let speed = (target - now)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);

if (now === target ) {
clearInterval(t);
} else {
ele.style[attr] = now + speed + "px";
}
},30)

}
// 获取非行内样式的兼容
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}

• 点赞
• 收藏
• 分享
• 文章举报