用原生js封装轮播图

原生js封装轮播图

对于初学js的同学来说，轮播图还是一个难点，尤其是原生js封装轮播图代码，下面是我之前做的一个轮播图项目中封装好的一些代码，有需要的同学可以看一下，有什么不懂的可以看注释，注释看不懂的可以直接私信我

slide.js

/*
 * 轮播图
 */

function Slide(elem, ms, d, ind){
	this.el = elem;
	this.w = parseInt(getStyle(elem, "width"));
	this.h = parseInt(getStyle(elem, "height"));
	var a = this.el.children;
	this.ul = a[0];
	this.ol = a[1];
	this.lBtn = a[2];
	this.rBtn = a[3];
	this.olspan = this.ol.getElementsByTagName("span");
	this.l = this.olspan.length;
	this.ul.style.width = this.w*(this.l+1)+"px";	// ul的宽度
	this.lBtn.style.top = this.rBtn.style.top = (this.h-this.rBtn.offsetHeight)/2+"px";
	this.ms = ms;	// 每隔多久执行一次滚动
	this.d = d;	// 轮播时方向

	this.ul.innerHTML += this.ul.children[0].outerHTML;	//将第一张图片复制到最后一个位置上

	var that = this;

	this.now = ind;
	that.prev = -that.now*that.w;

	this.run = function(){
		var i=0, l=that.l, btns=that.olspan, btn;
		for( ; i<l; i++){
			btn = btns[i];
			btn.i = i;
			btn.onclick = function(){
				that.now = this.i;
				that.tab();
			}
		}

		that.timer = setInterval(that.next, that.ms);
		that.el.onmouseover = that.over;
		that.el.onmouseout = that.out;
		that.lBtn.onclick = function(){
			that.now--;
			that.d = -1;
			that.tab();
		}
		that.rBtn.onclick = function(){
			that.now++;
			that.d = 1;
			that.tab();
		}
		that.lBtn.onmousedown = that.rBtn.onmousedown = function(){
			return false;
		}
	}

	this.tab = function(){
		that.ul.style.left = that.prev+"px";	// 每次运动时，先瞬间定位到上一次的目标值，然后再执行本次运动

		if( that.now == that.l ){
			that.prev = 0;
			startMove(that.ul, {"left":-that.now*that.w}, function(){
				that.ul.style.left = "0px";
			});
			that.now = 0;
		}else if( that.now == -1 ){
			that.now = that.l-1;
			that.ul.style.left = -that.l*that.w+"px";
			that.prev = -that.now*that.w;
			startMove(that.ul, {"left":that.prev});
		}else{
			that.prev = -that.now*that.w;
			startMove(that.ul, {"left":that.prev});
		}

		// 样式
		for( var i=0,l=that.l; i<l; i++ ){
			that.olspan[i].className = "";
		}
		that.olspan[that.now].className = "selected";
	}

	this.next = function(){
		that.now += that.d;
		that.tab();
	}

	this.over = function(){
		clearInterval(that.timer);
		startMove(that.lBtn, {"opacity":100});
		startMove(that.rBtn, {"opacity":100});
	}
	this.out = function(){
		that.timer = setInterval(that.next, that.ms);
		startMove(that.lBtn, {"opacity":0});
		startMove(that.rBtn, {"opacity":0});
	}

	this.tab();
	this.run();
}

startMove.js(运动函数)

/*
 * 运动函数
 * 参数：
 * elem 指操作的元素
 * obj 指操作的元素节点上的css属性及它的目标值
 * 			attr 指操作的元素节点上的css属性
 * 			target 指操作的元素节点上的css属性的目标值
 * fn 指运动函数执行完，执行哪一个函数
 */
function startMove(elem, obj, fn){
	// 清除定时器
	clearInterval(elem.timer);
	// 多属性同时运动时，是否每一个属性都到了目标值
	// 开启定时器
	elem.timer = setInterval(function(){
		var flag = true;	// 默认时认为到了目标值
		// 支持多属性同时运动
		for( var attr in obj ){
			// 目标值
			var target = obj[attr];
			// 判断属性是否为透明度
			var v; // 获取当前值
			if( attr == "opacity" ){
				v = getStyle(elem, attr);
				v = Math.round(v*100);
			}else{
				v = parseInt(getStyle(elem, attr));
			}
			//console.log(v);
			// 目标值与当前值的间距
			var dist = target - v;
			// 求步长
			var speed = dist/6;
			// 步长取整数
			if(speed>0){
				speed = Math.ceil(speed);
			}else{
				speed = Math.floor(speed);
			}
			// 更新
			if( attr == "opacity" ){
				elem.style.opacity = (v+speed)/100;
				if(/MSIE/.test(navigator.userAgent)){// 如果当前浏览器为IE，则执行兼容代码
					elem.style.filter = "alpha(opacity="+(v+speed)+")";	// 兼容低版本IE
				}
			}else{
				elem.style[attr] = v+speed+"px";
			}
			// 如果没有到达目标值
			if(v!=target){
				flag = false;
			}
			//console.log(0);
		}
		// 如果已经到达目标值，则停止定时器
		if( flag ){
			clearInterval(elem.timer);
			if( fn ){	// 如果给定了第三个参数，则执行该函数
				fn();
			}
		}
	}, 50);	

}

/*
 * 获取行间样式
 */
function getStyle(elem, attr){
	if( window.getComputedStyle ){
		return getComputedStyle(elem, null)[attr];
	}else{
		return elem.currentStyle[attr];
	}
}

接下来是一些简单的css代码

/*
 * 轮播图
 */

.slide{
	position: relative;
	overflow: hidden;
}
.slide *{
	margin: 0;
	padding: 0;
}
.slide li{
	float: left;
	list-style: none;
}
.slide>ul{
	position: absolute;
	left: 0;
	top: 0;
}
.slide>ul>li{

}
.slide>ol{
	position: absolute;
	right: 0;
	bottom: 0;
}
.slide>ol>li{
	padding: 10px;
}
.slide>ol>li>span{
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: white;
	cursor: pointer;
}
.slide .selected{
	background: greenyellow;
}

.slide>p{
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 25px;
	border-radius: 15px;
	background: white;
	cursor: pointer;
	opacity: 0;
}
.slide>p:hover{
	background: greenyellow;
}
.slide>p:nth-child(3){
	left: 10px;
}
.slide>p:nth-child(4){
	right: 10px;
}

使用方法

<div id="div1" class="slide">
	<ul>
		<li><img src="img/001.jpg"/></li>
		<li><img src="img/002.jpg"/></li>
		<li><img src="img/003.jpg"/></li>
		<li><img src="img/004.jpg"/></li>
	</ul>
	<ol>
		<li><span></span></li>
		<li><span></span></li>
		<li><span></span></li>
		<li><span></span></li>
	</ol>
	<p>&lt;</p>
	<p>&gt;</p>
</div>

接下来在script中直接new一个实例,new Slide(div1, 3000, 1, 1);就可以实现轮播效果

代码很简单，细心观察，你也是大神