基于面向对象封装向左透明度轮播图

基于面向对象封装向左和透明度轮播图

由于之前写轮播图的时候不想用jq插件，写面向过程感觉太麻烦，所以用自己所学就封装了个基于面向对象轮播图（包含向左和透明度），接下来啥也不说 直接上代码。

html代码片段

<!--向左-->
<div id="box">
	<ul id="list">
		<li style="background: orange;">1</li>
		<li style="background: green;">2</li>
		<li style="background: pink;">3</li>
		<li style="background: blue;">4</li>
	</ul>
	<ul id="list2">
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<div id="prev">上一页</div>
	<div id="next">下一页</div>
</div>
<!--透明度-->
<div id="box">
	<ul id="list">
		<li style="background: orange;">1</li>
		<li style="background: green;">2</li>
		<li style="background: pink;">3</li>
		<li style="background: blue;">4</li>
	</ul>
	<ul id="list2">
		<li style="background: orange;">1</li>
		<li style="background: green;">2</li>
		<li style="background: pink;">3</li>
		<li style="background: blue;">4</li>
	</ul>
	<div id="prev">上一页</div>
	<div id="next">下一页</div>
</div>

css代码片段

<!--向左-->
* {margin: 0; padding: 0; border: none;}
ul,li {list-style: none;}
#box {
	width: 600px;
	height: 300px;
	margin: 100px auto;
	border: 5px solid black;
	position: relative;
	overflow: hidden;
}
#list {
	position: absolute;
	left: 0;
	top: -0px;
}
#list li {
	width: 600px;
	height: 300px;
	text-align: center;
	line-height: 300px;
	font-size: 100px;
	float: left;
}

#list2 {
	width: 200px;
	height: 20px;
	position: absolute;
	right: 10px;
	bottom: 20px;
}
#list2 li {
	width: 18px;
	height: 18px;
	border: 1px solid fuchsia;
	background: #008B8B;
	float: left;
	margin-left: 5px;
	cursor: pointer;
	text-align: center;
	line-height: 18px;
	font-size: 14px;
}
#list2 li.active{
	background: #444444;
	color: white;
}

#prev, #next {
	width: 50px;
	height: 22px;
	background: purple;
	position: absolute;
	top: 45%;
	color: white;
	cursor: pointer;
}
#prev {
	left: 5px;
}
#next {
	right: 5px;
}
<!--透明度-->
* {margin: 0; padding: 0; border: none;}
ul,li {list-style: none;}
#box {
	width: 600px;
	height: 300px;
	margin: 100px auto;
	border: 5px solid black;
	position: relative;
}
#list {				
}
#list li {
	width: 600px;
	height: 300px;
	text-align: center;
	line-height: 300px;
	font-size: 100px;
	position: absolute;
	left: 0;
	top: 0;
	opacity:  0;
	filter: alpha(opacity=0);
}

#list2 {
	width: 600px;
	height: 100px;
	position: absolute;
	left: 10px;
	top: 330px;
}
#list2 li {
	width: 110px;
	height: 60px;
	border: 1px solid fuchsia;
	background: #008B8B;
	float: left;
	margin-left: 20px;
	cursor: pointer;
	text-align: center;
	line-height: 60px;
	font-size: 30px;
	opacity:  0.3;
	filter: alpha(opacity=30);
}

#prev, #next {
	width: 50px;
	height: 22px;
	background: purple;
	position: absolute;
	top: 45%;
	color: white;
	cursor: pointer;
}
#prev {
	left: 5px;
}
#next {
	right: 5px;
}

JS面向对象代码片段

function Carousel(){
	var obj = null;
	//默认属性
	this.settings = {
		type:'lucency',
		time:3000
	}
}
Carousel.prototype.json = {};
Carousel.prototype.init = function(opt) {
	var obj = Object.assign(this.settings, opt);
	if(this.json[opt.iNow] == undefined) {
		this.json[opt.iNow] = true;
	}
	if(this.json[opt.iNow]) {
		if(!opt.dom){
			alert('id值不能为空');
			return;
		}
		this.obtain(obj);
		this.json[opt.iNow] = false;
	}
}
Carousel.prototype.obtain = function(obj){
	this.box = document.getElementById(obj.dom);
	this.list1 = this.box.children[0];
	this.ali1 = this.list1.children;
	this.list2 = this.box.children[1];
	this.ali2 = this.list2.children;
	this.time = obj.time;
	this.n = 0;
	if(obj.type == 'left'){
		this.list1.appendChild(this.ali1[0].cloneNode(true));
		this.liW = this.ali1[0].offsetWidth;
		this.size = this.ali1.length;
		this.list1.style.width = this.liW * this.size +'px';
		this.next = this.box.children[3];
	}
	else if(obj.type=='lucency'){
		this.ali1[0].style.opacity = 1; 
		this.ali1[0].style.filter = "alpha(opacity=100)";
		this.ali2[0].style.opacity = 1; 
		this.ali2[0].style.filter = "alpha(opacity=100)";
		this.size = this.ali1.length;
	}
	else{
		alert('参数错误')
		return;
	}
	this.motion(obj)
	this.prevClick(obj)
	this.nextClick(obj)
	this.mouseenter()
	this.mouseleave(obj)
	this.startClick(obj);
}
Carousel.prototype.motion= function(obj){
	this.timer = setInterval(()=>{
		this.n++;
		this.startMove(obj)
	},obj.time)
}
Carousel.prototype.startMove = function(obj){
	if(obj.type == 'left'){
		if(this.n>=this.size){
			this.list1.style.left = 0;
			this.n=1;
		}
		//左边界
		if(this.n<0){
			this.list1.style.left = -(this.size-1)*this.liW + "px";
			this.n = this.size-2;
		}
		animate(this.list1, {left: -this.liW*this.n});
		for (var i=0;i<this.ali2.length;i++) {
			if(this.n==i){
				this.ali2[this.n].className = 'active';
			}else{
				this.ali2[i].className = '';
			}
		}
		if (this.n == this.size-1) {
			this.ali2[0].className = "active";
		}
	}
	else if(obj.type=='lucency'){
		if (this.n < 0) {
			this.n = this.size-1;
		}
		if (this.n >= this.size){
			this.n = 0;
		}
		for (var i=0; i<this.ali1.length; i++) {
			if (this.n == i) {
				animate(this.ali1[this.n], {opacity:100}); //淡入显示
				animate(this.ali2[this.n], {opacity:100}); //淡入显示
			}
			else {
				animate(this.ali1[i], {opacity:0}); //淡出隐藏
				animate(this.ali2[i], {opacity:30}); 
			}
		}
	}
	else{
		alert('参数错误')
		return;
	}
}
Carousel.prototype.startClick = function(obj){
	var that = this;
	for (var i = 0; i < that.ali2.length;i++) {
		that.ali2[i].index = i;
		that.ali2[i].onmouseenter = function(){
			that.n = this.index;
			that.startMove(obj);
		}
	}
}
Carousel.prototype.prevClick = function(obj){
	var that = this;
	if(!that.box.children[2]){
		return;
	}
	var prev = that.box.children[2];
		prev.onclick = function(){
		that.n--;
		that.startMove(obj);
	}
}
Carousel.prototype.nextClick = function(obj){
	var that = this;
	if(!that.box.children[3]){
		return;
	}
	var next = that.box.children[3];
	next.onclick = function(){
		that.n++;
		that.startMove(obj);
	}
}
Carousel.prototype.mouseenter = function(){
	var that = this;
	that.list1.onmouseenter = function(){
		clearInterval(that.timer)
	}
}
Carousel.prototype.mouseleave = function(obj){
	var that = this;
	that.list1.onmouseleave = function(){
		clearInterval(that.timer)
		that.motion(obj);
	}
}

JS运动封装代码

//获取css样式属性值
function getStyleAttr(obj, attr){
	if (window.getComputedStyle) {
		return getComputedStyle(obj, null)[attr];
	}
	return obj.currentStyle[attr];
}
//封装缓冲运动
//animate(obj, {left:300, top:300, width:300}, function(){});
function animate(obj, json, fn){	
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){	
		var bstop = true; //表示可以停止，所有属性都到达了目标值
		//遍历json对象
		for (var attr in json){
			var target = json[attr];
			//attr: 属性名称
			//target: 目标值
			//1, current
			var current;
			if (attr == "opacity") { //透明度
				current = Math.round(getStyleAttr(obj, attr)*100);
			}
			else { //left, top, width,height,...
				current = parseInt( getStyleAttr(obj, attr) );
			}
			//2, speed
			var speed = (target-current)/8;
			speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
			//3, 临界值
			if (current != target) {
				bstop = false;
			}
			//4， 运动
			if (attr == "opacity") {
				obj.style[attr] = (current + speed)/100 ;
				obj.style.filter = "alpha(opacity="+ (current+speed) +")";
			}
			else {
				obj.style[attr] = current + speed + "px";
			}
		}
		//如果所有属性都到达了目标值
		if (bstop){
			clearInterval(obj.timer);
			//回调
			if (fn) { 
				fn();
			}			
		}
	}, 30)
}

调用方法

var carousel = new Carousel();
carousel.init({
	dom:'box',//必填项   
	type:'left',//根据情况选择 left向左    lucency透明度
	time:4000  //不填走默认3000
})

欢迎大家一起探讨，有不懂得可以加qq讨论。2551246288