Javascript专题(三)c.各种轮播--上下滚动轮播(面向对象版本)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body,div,ul,li{margin: 0;padding: 0;list-style: none;}
		body{
			background: #000;
		}
		#box{
			margin: 10px auto;
			width: 492px;
			height: 172px;
			border: 8px solid #fff;
			border-radius: 5px; 

			position: relative;
		}
		#box .list{
			width: 490px;
			height: 170px;
			border: 1px solid blue;
			overflow: hidden;

			position: relative;
		}
		#box .list ul{
			position: absolute;
			top: 0;
			left: 0;
		}
		#box .list ul li{
			width: 490px;
			height: 170px;
			overflow: hidden;
		}
		#box .list-count{
			position: absolute;
			right: 0;
			bottom: 5px;
			cursor: pointer;
		}
		#box .list-count li{
			color: #fff;
			float: left;
			margin-right: 5px;
			border-radius: 5px;
			background: #f60;
			width: 20px;
			height: 20px;
			text-align: center;
			font: 12px/20px Arial;
			opacity: 0.7;
			filter: alpha(opacity=70);
		}
		#box .list-count li.current{
			opacity: 1;
			filter: alpha(opacity=100);
		}


	</style>
</head>
<body>
	<div id="box">
		<div class="list">
			<ul>
				<li><img src="../image/landscape_map/055.jpg" width="490" height="170"></li>
				<li><img src="../image/landscape_map/037.jpg" width="490" height="170"></li>
				<li><img src="../image/landscape_map/039.jpg" width="490" height="170"></li>
				<li><img src="../image/landscape_map/032.jpg" width="490" height="170"></li>
				<li><img src="../image/landscape_map/038.jpg" width="490" height="170"></li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript">
	//获取ID
	var $=function(id){return typeof id==="string"?document.getElementById(id):id}
	//获取tagName
	var $$=function(tagName,oParent){return (oParent||document).getElementsByTagName(tagName)}
	//自动轮播对象
	var obj_Auto=function(id){this.init(id)};
	obj_Auto.prototype={
		init:function(id){
			var oThis=this;
			this.oBox=$(id);
			this.oUl=$$("ul",this.oBox)[0];
			this.aImg=$$("img",this.oBox);
			this.createBtn();
			this.aBtn=$$("li",this.oCount);
			this.iNow=0;
			this.start_timer=null;
			this.auto_timer=null;
			for(var i=0;i<this.aBtn.length;i++){
				this.aBtn[i].index=i;
				this.aBtn[i].onmouseover=function(){
					oThis.iNow=this.index;
					//去除自动播放时的bug
					//另外这两句话位置不能错了,否则就是上一次的Show了
					oThis.Show();
				}
			}

			this.oBox.onmouseout=function(){
				oThis.Auto();
			}
			this.oBox.onmouseover=function(){
				clearInterval(oThis.auto_timer);
			}
		},
		createBtn:function(){
			//碎片传递,用于提升效率,将所有新增先添加到碎片中,防止多次渲染导致的流畅°下降问题。
			//另外一种方法:可以先扔进数组里,主要多次for循环的创建
			this.oCount=document.createElement("ul");
			this.oFrag=document.createDocumentFragment();
			this.oCount.className="list-count";
			for(var i=0;i<this.aImg.length;i++){
				var oLi=document.createElement("li");
				oLi.innerHTML=i+1;
				this.oFrag.appendChild(oLi);
			}
			this.oCount.appendChild(this.oFrag);
			this.oBox.appendChild(this.oCount);
		},
		Show:function(){
			for(var i=0;i<this.aBtn.length;i++)this.aBtn[i].className="";
			this.aBtn[this.iNow].className="current";
			this.Move(-this.iNow*this.aImg[0].offsetHeight);

		},
		Move:function(distance){
			var oThis=this;
			clearInterval(this.start_timer);
			this.start_timer=setInterval(function(){
				var speed=(distance-oThis.oUl.offsetTop)/10;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				//若是不总是向上取整,会永远到不了
				oThis.oUl.offsetTop==distance?clearInterval(oThis.start_timer)
				:oThis.oUl.style.top=oThis.oUl.offsetTop+speed+"px";
			},30)
		},
		Auto:function(){
			var oThis=this;
			clearInterval(this.suto_timer);
			this.auto_timer= setInterval(function(){
				oThis.iNow<oThis.aImg.length-1? oThis.iNow++:(oThis.iNow=0);
				oThis.Show();
			},2000);
		}
	}

	new obj_Auto("box");//在没有创建之前不可以直接
	var x=new obj_Auto("box");
</script>
</html>
posted @ 2017-05-16 15:41  海客无心x  阅读(268)  评论(0编辑  收藏  举报