Javascript专题（三）c.各种轮播--上下滚动轮播(面向
2017-04-15 本文已影响0人
海客无心
<!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></li>
<li></li>
<li></li>
<li></li>
<li></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);
}
this.Auto();
},
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;
this.auto_timer= setInterval(function(){
oThis.iNow<oThis.aImg.length-1? oThis.iNow++:(oThis.iNow=0);
oThis.Show();
},2000);
}
}
new obj_Auto("box");//在没有创建之前不可以直接
</script>
</html>
