js原生之轮播封装，ES6语法，箭头函数，构造函数。

亦凉 2022-03-06 16:40 185阅读 0赞

## 样式在以前的一个文章，这里主要封装。 ##

[html+css\*样式点击这里][html_css]

## es6构造函数+箭头函数封装 ##

class lunbo { 
    //这里是es6的构造函数，class语法糖。
    	constructor(arg) { 
    	//定义实例属性，方法中可以调用
    		this.oWrap = document.getElementById("wrap");
    		this.oUl = document.getElementById("ul");
    		this.oLi = document.getElementsByTagName("li");
    		this.oSpan = document.getElementsByTagName("span");
    		this.oul = document.getElementById("ul2");
    		this.oli = this.oul.children;
    		this.x = this.oLi[0].offsetWidth;
    		this.oUl.style.width = this.x * this.oLi.length + "px";
    		this.oUl.style.height = 500 + "px";
    		this.i = 0;
    		this.yuan();
    		this.start();
    
    		//左右箭头
    		this.left();
    		//划上时暂停
    		this.stop();
    	}
    	yuan() { 
    		//给三个圆设置单击事件
    		console.log(this);
    		for (let j = 0; j < this.oli.length; j++) { 
    			this.oli[j].onclick = () => { 
    				// oUl.style.left=j*x+"px";
    				startMove(this.oUl, { 
    					left: -j * this.x
    				});
    				for (var y = 0; y < this.oli.length; y++) { 
    					this.oli[y].className = "";
    				}
    				this.oli[j].className = "li";
    				this.i = j;
    			}
    		}
    	}
    	//方法之间不需要逗号分隔，方法直接调用，不需要function关键字
    	start() { 
    		this.oWrap.timer = setInterval(() => { 
    			this.i++;
    			if (this.i == 4) { 
    				this.oUl.style.left = 0 + "px";
    				this.i = 1;
    			}
    			for (var j = 0; j < this.oli.length; j++) { 
    				this.oli[j].className = "";
    			}
    			if (this.i == 3) { 
    				this.oli[0].className = "li";
    			} else { 
    				this.oli[this.i].className = "li";
    			}
    			startMove(this.oUl, { 
    				left: -this.i * this.x
    			});
    		}, 1000);
    	}
    	//左右箭头
    	left() { 
    		this.oSpan[0].onclick = () => { 
    			this.i++;
    			if (this.i == 4) { 
    				this.oUl.style.left = 0 + "px";
    				this.i = 1;
    			}
    			for (var j = 0; j < this.oli.length; j++) { 
    				this.oli[j].className = "";
    			}
    			if (this.i == 3) { 
    				this.oli[0].className = "li";
    			} else { 
    				this.oli[this.i].className = "li";
    			}
    			startMove(this.oUl, { 
    				left: -this.i * this.x
    			});
    		};
    		this.oSpan[1].onclick = () => { 
    			this.i--;
    			if (this.i == -1) { 
    				this.oUl.style.left = -1500 + "px";
    				i = 2;
    			}
    			for (var j = 0; j < this.oli.length; j++) { 
    				this.oli[j].className = "";
    			}
    			if (this.i == 3) { 
    				this.oli[0].className = "li";
    			} else { 
    				this.oli[this.i].className = "li";
    			}
    			startMove(this.oUl, { 
    				left: -this.i * this.x
    			});
    		};
    	}
    
    	//划上时暂停
    	stop() { 
    		this.oWrap.onmouseover = () => { 
    			clearInterval(this.oWrap.timer);
    		}
    		this.oWrap.onmouseout = () => { 
    			this.oWrap.timer = setInterval(() => { 
    				this.i++;
    				if (this.i == 4) { 
    					this.oUl.style.left = 0 + "px";
    					this.i = 1;
    				}
    				for (var j = 0; j < this.oli.length; j++) { 
    					this.oli[j].className = "";
    				}
    				if (this.i == 3) { 
    					this.oli[0].className = "li";
    				} else { 
    					this.oli[this.i].className = "li";
    				}
    				startMove(this.oUl, { 
    					left: -this.i * this.x
    				});
    			}, 1000)
    		}
    	}
    
    
    }

## 上面函数还缺少一个startMove，移动的封装 ##

//这里用的es5语法
    function startMove(obj, json, fn) { 
    	clearInterval(obj.timer);
    	obj.timer = setInterval(function() { 
    		var flag = true; //假设所有属性都达到目标值，这是一个开关。
    		for(var attr in json) { 
    			var iTarget = json[attr];
    			if(attr == "opacity"){ //透明度兼容
    				var iCur = parseInt(getStyle(obj, attr)*100);
    			}else{ 
    				var iCur = parseInt(getStyle(obj, attr));
    			}
    			
    			var iSpeed = (iTarget - iCur) / 7;//移动和透明度变化
    			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    			
    			if(attr == "opacity"){ 
    				obj.style.opacity = (iCur + iSpeed)/100;
    				obj.style.filter = "alpha(opacity="+(iCur + iSpeed)+")";
    			}else{ 
    				obj.style[attr] = iCur + iSpeed + "px";
    			}
    			//只要有一个达到目标值，定时器就会被清除,会导致部分属性没有达到目标值
    			//所有属性都达到目标值时，清除定时器
    			if(iCur != iTarget) {  //假设是否成立由此判断
    				flag = false;
    			}
    		}
    
    		if(flag) {  //如果假设成立，清除定时器
    			clearInterval(obj.timer);
    			if(fn) { 
    				fn();
    			}
    		}
    
    	}, 20)
    }
    
    //这个是js获取style的封装。
    function getStyle(obj, attr) { 
    	if(obj.currentStyle) { 
    		return obj.currentStyle[attr];
    	}
    	return getComputedStyle(obj, null)[attr];
    }

> 就这些了，可以一起探讨。样式做的比较丑哈

[html_css]: https://blog.csdn.net/qq_42690547/article/details/85863107