轮播图系列教程（五），左右切换，运动框架应用——和派孔明

最新推荐文章于 2019-09-09 16:18:00 发布

xyphf_和派孔明

最新推荐文章于 2019-09-09 16:18:00 发布

阅读量1k

点赞数

分类专栏：常用特效 DOM&BOM操作文章标签：前端 DOM 运动框架封装轮播图

本文链接：https://blog.csdn.net/xyphf/article/details/51044094

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

常用特效

24 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片左右滑动效果 - 和派孔明 高级前端工程师</title>
<link href="css.css" rel="stylesheet" type="text/css" /></span><pre name="code" class="css"><strong><style>
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }

body { background: #ecfaff; }

.box { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; background: #ccc; }
.box ol { position: absolute; left: 200px; bottom: 5px; z-index: 2; }
.box ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.box .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }

.box ul { position: absolute; top: 0; left: 0; z-index: 1; }
.box ul li { width: 470px; height: 150px; float: left; }
.box ul img { float: left; width: 470px; height: 150px; }

.box p { width: 20px; height: 20px; line-height: 20px; font-family: arial; color: #fff; text-align: center; font-weight: bold; background: #333; border: 1px solid #ccc; position: absolute; top: 60px; z-index: 2; cursor: pointer; }
.box .prev { left: 10px; }
.box .next { right: 10px; }
</style></strong><pre name="code" class="javascript">

//简易运动框架
/*-----------------------------*/
<strong>function move(obj,json,opational){
	
	opational=opational||{};
	opational.time=opational.time||300;
	opational.fn=opational.fn||null;
	opational.type=opational.type||'ease-out';
	
	var start={};
	var dis={};
	for(var key in json){
		start[key]=parseFloat(getStyle(obj,key));
		dis[key]=json[key]-start[key];
	}
	
	var count=Math.round(opational.time/30);
	var n=0;
	
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		
		n++;
		
		for(var key in json){
			
			//var cur=start[key]+n*dis[key]/count;
			switch(opational.type){
				case 'linear':
					var a=n/count;
					var cur=start[key]+dis[key]*a;
					break;	
				case 'ease-in':
					var a=n/count;
					var cur=start[key]+dis[key]*a*a*a;
					break;	
				case 'ease-out':
					var a=1-n/count;
					var cur=start[key]+dis[key]*(1-a*a*a);
					break;	
			}
		
		
			if(key=='opacity'){
				obj.style.opacity=cur;
				obj.style.filter='alpha(opacity='+cur*100+')';
			}else{
				obj.style[key]=cur+'px';
			}
		}
		
		console.log('跑');
		
		if(n==count){
			clearInterval(obj.timer);
			opational.fn && opational.fn();
		}
		
	},30);	
}

function getStyle(obj,attr){
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];	
}</strong>
/*-----------------------------*/

window.οnlοad=function(){ var oPlay=document.getElementById('play'); var aLi=oPlay.children[2].children; var oUl=oPlay.children[3]; var oNext=oPlay.getElementsByClassName('next')[0]; var oPrev=oPlay.getElementsByClassName('prev')[0]; var now=0; var ready=true; oUl.innerHTML+=oUl.innerHTML; oUl.style.width=oUl.children.length*oUl.children[0].offsetWidth+'px'; for(var i=0;i<aLi.length;i++){ (function(index){ aLi[i].οnclick=function(){ now=index; tab(); }; })(i); } function tab(){ for (var i = 0; i < aLi.length; i++) { aLi[i].className=''; } if(now==5){ aLi[0].className='active'; }else{ aLi[now].className='active'; } move(oUl,{left:-now*oUl.children[0].offsetWidth},{time:700, fn:function(){ raady=true; if(now==5){ //归位 oUl.style.left=0; now=0; } }}); } oNext.οnclick=function(){ if(!ready) return; now++; tab(); }; oPrev.οnclick=function(){ if(!ready) return; ready=false; now--; if(now==-1){ now=4; oUl.style.left= -oUl.offsetWidth/2+'px'; } tab(); };};</script></head><body><div class="box" id="play"> <p class="prev">«</p> <p class="next">»</p> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ul> <li><a href="http://javascript"><img src="images/1.jpg" alt="和派孔明" /></a></li>
<li><a href="http://javascript"><img src="images/2.jpg" alt="和派孔明" /></a></li> <li><a href="http://javascript"><img src="images/3.jpg" alt="和派孔明" /></a></li>
<li><a href="http://javascript"><img src="images/4.jpg" alt="和派孔明" /></a></li> <li><a href="http://javascript"><img src="images/5.jpg" alt="和派孔明" /></a></li> </ul></div></body></html>

xyphf_和派孔明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图系列教程（五），左右切换，运动框架应用——和派孔明

幻灯片左右滑动效果 - 和派孔明高级前端工程师* { padding: 0; margin: 0; }li { list-style: none; }img { border: none; }body { background: #ecfaff; }.box { width: 470px; height: 150px; overflow: hidden; position: re
复制链接

扫一扫