我的轮播练习

最近在练习面向对象的写法，之前写了拖拽现在写写前端三大民工效果的轮播吧。

1.加标签的思路（1个 2个等等）

（1）复制首尾顺便加入了touch事件，在手机模拟器可以拖动（自己写的玩的懒得加注释了将就看）
有没有大神来指导下。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
</head>
<style>
*{padding:0;margin:0;}
.box {
height:200px;
width: 300px;
overflow: hidden;
position:relative;
}
ul{

height:100%;
width:600%;
background:red;
color:green;
font-size:30px;
display:-webkit-box;
display:box;
overflow: hidden;
position:relative;
z-index:22;
}
li{
text-align:center;
width:300px;
list-style:none;
position:relative;
background:red;

}
.left{
position:absolute;
top:50%;
left:20px;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
background:#399;
z-index:333;
}
.right{
position:absolute;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
right:20px;
background:#399;
z-index:333;
}
.move{
transition:all ease .5s;
}
#box2{
position:absolute;
bottom:0;
right:0;
height:100px;
width:100px;
background:green;
}
</style>
<script>
function Tab(ele){
this.ele=ele;
var _this=this;
this.oUl=_this.ele.getElementsByTagName('ul')[0];
this.liW=this.oUl.children[0].offsetWidth;
this.inow= 1;
this.isclick=false;
this.len=this.oUl.children.length;
this.events={
handleEvent:function(event){
switch(event.type){
case 'touchstart':
_this.fnstart(event);
break;
case 'touchmove':
_this.fnmove(event);
break;
case 'touchend':
_this.fnend(event);
break;
case 'click':
_this.click(event);
break;
case 'webkitTransitionEnd':
_this.moveEnd();
break;
}
}
};

this.y=0;
}
Tab.prototype={
click:function(ev){

var oSrc=ev.srcElement|| ev.target;

if(oSrc.tagName.toLowerCase() =='button' && oSrc.className=='left'){
if(this.isclick){
return;
}
this.isclick=true;
this.inow--;
console.log(this.inow);
this.render(true);

}
if(oSrc.tagName.toLowerCase() =='button' && oSrc.className=='right'){
if(this.isclick){
return;
}
this.isclick=true;
this.inow++;
this.render(true);
}

},
render:function(ismove){
var _this=this;
if(ismove){
this.oUl.className='move';
this.oUl.addEventListener('webkitTransitionEnd',_this.events,false);
}
this.x=-this.liW*this.inow;
this.oUl.style.transform='translate3d('+this.x+'px,0px,0px)';
this.oUl.style.webkitTransform='translate3d('+this.x+'px,0px,0px)';
},
fnstart:function(ev){
if(this.isclick) return;
this.isclick=true;
this.oUl.className='';
var touches=ev.targetTouches[0],
_this=this;

this.disP={
downx:touches.pageX,
downy:touches.pageY,
x:touches.pageX-this.x,
y:touches.pageY-this.y,
id:touches.identifier,
startTime:+new Date()
};
document.addEventListener('touchmove',_this.events,false);
document.addEventListener('touchend',_this.events,false);
},
fnmove:function(ev){
var touches=ev.targetTouches[0];
if(touches.identifier== this.disP.id){
this.x=touches.pageX-this.disP.x;
this.oUl.style.transform='translate3d('+this.x+'px,0px,0)';
this.oUl.style.Webkittransform='translate3d('+this.x+'px,0px,0)';
}
},
fnend:function(ev){
var _this=this,
touches=ev.changedTouches[0];
if(touches.identifier==this.disP.id){
document.removeEventListener('touchmove',_this.events,false);
document.removeEventListener('touchend',_this.events,false);
var upX=touches.pageX;
var upY=touches.pageY;
if(Math.abs(upX-this.disP.downx)>50){
//切换
if(upX<this.disP.downx){ //左 ++
this.inow++;
}else{ //右 --
this.inow--;
}
}
else{
this.isclick=false;
}
console.log(this.isclick);
this.oUl.className='move';
this.render(true);
}
},
moveEnd:function(){
if(this.inow==0){
this.oUl.className='';
this.inow=this.len-2;
this.render(false);
}
if(this.inow==this.len-1){

this.oUl.className='';
this.inow=1;
this.render(false);
}
this.isclick=false;
},
clone:function(){
var fir=this.oUl.children[0].cloneNode(true),
last=this.oUl.children[this.len-1].cloneNode(true);
console.log(fir);
console.log(last);
this.oUl.appendChild(fir);
this.oUl.insertBefore(last,this.oUl.children[0]);
console.log(this.len);
this.len=this.oUl.children.length;
console.log(this.len);
},
init:function(){
var _this=this;
this.clone();
this.render(false);
this.oUl.addEventListener('touchstart',_this.events,false);
this.ele.addEventListener('click',_this.events,false);
}
};
window.onload=function(){
var box=document.querySelector('.box');
var tab=new Tab(box);
tab.init();
}
</script>
<body>
<div id="box2"></div>
<div class="box">
<button class="left">left</button>
<button class="right">right</button>
<ul>
<li style="background:#245;">0</li>
<li style="background:#611">1</li>
<li style="background:#399">2</li>
<li style="background:#876">3</li>
</ul>
</div>
</body>
</html>

（2）复制首个和上面思路差不多代码也贴一下吧
其中的定时器是为了异步，没想到什么好方法，（听说es6有了新解决办法，没用过）
有什么好方法欢迎交流下。。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
</head>
<style>
*{padding:0;margin:0;}
.box {
height:200px;
width: 200px;
background: #000;

overflow: hidden;
position:relative;
}
ul{
width:500%;
height:100%;
background:red;
color:green;
font-size:30px;
display:-webkit-box;
display:box;
overflow: hidden;
position:relative;
z-index:22;
}
li{
text-align:center;
width:200px;
list-style:none;
position:relative;
background:red;

}
.left{
position:absolute;
top:50%;
left:20px;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
background:#399;
z-index:333;
}
.right{
position:absolute;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
right:20px;
background:#399;
z-index:333;
}
.move{
transition:all ease .5s;
}
</style>
<script>
window.onload=function(){
var oUl=document.getElementsByTagName('ul')[0],
aLi=oUl.children,
len=aLi.length,
liW=aLi[0].offsetWidth,
left=document.querySelector('.left'),
right=document.querySelector('.right'),
inow= 0,
timer=null,
isclick=false;
oUl.style.webkitTransform='translate3d(-'+liW*inow+'px,0px,0px)';
left.onclick=function(){
if(isclick) return;
isclick=true;
inow--;
if(inow==-1){
oUl.className='';
inow=len-1;
oUl.style.webkitTransform='translate3d(-'+liW*inow+'px,0px,0px)';
inow--;
}
back();

};
function back(){
clearTimeout(timer);
timer=setTimeout(function(){
oUl.className='move';
oUl.style.webkitTransform='translate3d(-'+liW*inow+'px,0px,0px)';
oUl.addEventListener('webkitTransitionEnd',fnEnd,false);
},0)
}
right.onclick=function(){
if(isclick){return;}
isclick=true;
inow++;
if(inow==len){
oUl.className='';
inow=0;
oUl.style.webkitTransform='translate3d(-'+liW*inow+'px,0px,0px)';
inow++;
}
back();

};
function fnEnd(){
isclick=false;
}
}

 

</script>
<body>
<div class="box">
<button class="left">left</button>
<button class="right">right</button>
<ul>
<li style="background:#245;">0</li>
<li style="background:#611">1</li>
<li style="background:#399">2</li>
<li style="background:#876">3</li>
<li style="background:#245">0</li>
</ul>
</div>
</body>
</html>

2. 位置变换（参考疯狂weber的文章 http://www.w3cfuns.com/notes/12367/fe5fdf4ae40d92cc513af4dc3d0ec657.html）
無需增添dom

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
</head>
<style>
*{padding:0;margin:0;}
.box {
height:200px;
width: 200px;

/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
overflow: hidden;
position:relative;
}
ul{
width:100%;
height:100%;
font-size:30px;
overflow: hidden;
position:relative;
z-index:22;
list-style:none;
}
li{
text-align:center;
width:200px;
height:100%;
list-style:none;
position:absolute;
color:#fff;
top:0;
left:0;
background:red;
transform:translate3d(100%,0,0);

}

.left{
position:absolute;
top:50%;
left:20px;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
background:#399;
z-index:333;
}
.right{
position:absolute;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
right:20px;
background:#399;
z-index:333;
}
.move{
transition:all ease .8s;
}
</style>
<script>
window.onload=function(){
var oUl=document.getElementsByTagName('ul')[0],
aLi=oUl.children,
len=aLi.length,
liW=aLi[0].offsetWidth,
left=document.querySelector('.left'),
right=document.querySelector('.right'),
inow= 0,
temp,
isclick=false,
x=-inow*liW,
timer=null;
function render (isLeft){
var min,add;
if(isLeft){
add='+';
min='-';
}
else{
add='-';
min='+';
}
console.log(add);
console.log(min);
aLi[inow].style.webkitTransform='translate3d('+min+liW+'px,0px,0px)';
clearTimeout(timer);
timer=setTimeout(function(){
aLi[inow].className='move';
aLi[temp].className='move';
aLi[temp].style.webkitTransform='translate3d('+add+liW+'px,0px,0px)';
aLi[inow].style.webkitTransform='translate3d(0px,0px,0px)';
});
aLi[inow].addEventListener('webkitTransitionEnd',end,false);
}
function fnLeft(){
temp=inow;
inow--;
if(inow==-1){
inow=len-1;
}
render(true);
}
function fnRight(){
temp=inow;
inow++;
if(inow==len){
inow=0;
}
render(false);
}
left.onclick=function(){
if(isclick){return}
isclick=true;
fnLeft();

};
right.onclick=function(){
if(isclick){return}
isclick=true;
fnRight();
};
function end(){
aLi[inow].className='';
aLi[temp].className='';
isclick=false;
}
}
</script>

<body>
<div class="box">
<button class="left">left</button>
<button class="right">right</button>
<ul>
<li style="background:#245;transform:translateX(0)">0</li>
<li style="background:#611">1</li>
<li style="bacckground:#399">2</li>
<li style="background:#876">3</li>
</ul>
</div>
</body>
</html>

水平有限有什么问题欢迎指正，暂时就这样吧。

posted @ 2016-11-07 18:06 如刀似剑阅读(202) 评论(0) 收藏举报

刷新页面返回顶部

我的轮播练习

公告