面向对象无缝轮播图

面向对象无缝最基础样式轮播图

（如果有简单的方法大家可以私聊我讨论下）
css

body,ul,li{
	margin: 0;
	padding: 0;
}
img{
	display: block;
}
li{
	list-style: none;
}
#box{
	position: relative;
	width: 900px;
	height: 300px;
	overflow: hidden;
	margin: 20px auto;
}
#inner{
	position: absolute;
}
#inner li{
	float: left;
}
#inner img{
	width: 900px;
	height: 300px;
	overflow: hidden;
}
#btn span{
	position: absolute;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 50px;
	background: #000;
	opacity: .3;
	cursor: pointer;
	top: 50%;
	margin-top: -25px;
	color: white;
}
#btn span:first-child{
	left: 10px;
}
#btn span:last-child{
	right: 10px;
}
#num{
	position: absolute;
	right: 250px;
	bottom: 10px;
}
#num li{
	float: left;
	width: 100px;
	height: 30px;
	border-radius: 10px;
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	background: #000000;
	opacity: .7;
	color: red;
	cursor: pointer;
	margin: 0 10px;
}
#num li:hover,#num li.hover{
	background: red;
	color: white;
}

html

<div id="box">
	<ul id="inner">
		<li><img src="img/1.jpg"></li>
		<li><img src="img/2.jpg"></li>
		<li><img src="img/3.jpg"></li>
		<li><img src="img/1.jpg"></li>
	</ul>
	//可以先写出来 最后用js添加
	<!--<div id="btn">
		<span>&lt;</span>
		<span>&gt;</span>
	</div>
	<ul id="num">
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
	</ul>-->
</div>

html调用js文件

//运动函数封装
<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
//js
<script src="duixianglunbo.js" type="text/javascript" charset="utf-8"></script>
//调用js
<script type="text/javascript">
	let lunbo = new Lunbo();
	lunbo.Play();
	lunbo.Dian();
lunbo.Focus();
</script>

js文件

function Lunbo(){
	this.oBox = document.getElementById("box");
	this.oInner = document.getElementById("inner");
	this.aLi = this.oInner.children;
	
	this.wid = this.aLi[0].offsetWidth;
	this.len = this.aLi.length;
	this.oInner.style.width = this.len*this.wid+"px";
	
	this.i = 0;
	
	this.oBox.onmouseover = ()=>{
		clearInterval(this.timer);
	}
	this.oBox.onmouseout= ()=>{
		this.timer = setInterval(()=>{
			this.move();
		},1000)
	}
}
//轮播图只有图片时运动
Lunbo.prototype.Play= function(){
	this.timer = setInterval(()=>{
		this.move();
	},1000)
	this.move = function(){
		this.i++;
		//等于图片长度
		if(this.i == this.len){
			this.oInner.style.left = 0;
			this.i = 1;//目标值
		}
		//等于-1时让图片瞬间变成最后一张图，目标值变成倒数第三张图，
		if(this.i==-1){
			this.oInner.style.left = -(this.len-1)*this.wid+"px";
			this.i = this.len-2;//目标值
		}
		//焦点，角标 
		for(var j =0;j<this.aNum.length;j++){
			this.aNum[j].className = "";//把所有的都给清了
		}
		if(this.i==this.len-1){
			this.aNum[0].className = "hover"//当显示最后一张图片时，把第一个角标添加hover名
		}else{//hover是个名字，css样式里面有
			this.aNum[this.i].className = "hover";//其他时候显示哪张给哪个角标名字
		}
		
		startMove(this.oInner,{"left":-this.i*this.wid});
	}
	
}
//左右点击
Lunbo.prototype.Dian = function(){
	let oBtn = document.createElement("div");
	oBtn.innerHTML = "<span>&lt;</span><span>&gt;</span>";
	oBtn.id = "btn";
	this.oBox.appendChild(oBtn);
	
	let aBtn = oBtn.children;
	aBtn[0].onclick= ()=>{
		this.i= this.i-2;
		this.move();
	}
	aBtn[1].onclick= ()=>{
		this.move();
	}
}
//焦点
Lunbo.prototype.Focus = function(){
	let oUl = document.createElement("ul");
	oUl.innerHTML = `<li>1</li><li>2</li><li>3</li>`;
	oUl.id = "num";
	this.oBox.appendChild(oUl);
	
	this.aNum = oUl.children;
	for(let i = 0;i<this.aNum.length;i++){
		this.aNum[i].onmouseover = ()=>{
			this.i = i-1;//this.move里面i++
			this.move();
		}
	}
}

运动函数封装

function getStyle(domobj,attr) {
	if(window.getComputedStyle) {
		return getComputedStyle(domobj, null)[attr];
	}
	return domobj.currentStyle[attr];
}
/*
参数
 *obj指dom对象 
 *json->{"width":500,"height":500}
 *fn指之前属性变完之后，要执行的代码
 * */
function startMove(obj,json,fn){
	
	clearInterval(obj.timer);
	
	obj.timer = setInterval(function(){
		
		var flag = true;//假设当前值达到目标值了
		
		for(var attr in json){
			if(attr == "opacity"){
				var iCur = parseInt(getStyle(obj,"opacity")*100);
			}else{
				var iCur = parseInt(getStyle(obj,attr));
			
			}
			
			var iTarget = json[attr];
			
			var iSpeed = (iTarget-iCur)/8;
			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(iSpeed != 0){
				//只要有一个属性没有达到目标值，flag就为false
				flag = false;
			}
			
			
		}
		
		
		if(flag){
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
		}
		
		
	},20);
	
}