图片轮播（方法学习记忆）

1.tools工具类（使用原生简单模拟jq选择）

function $(selector,context){
var firstChar = selector.charAt(0);
context = context || document;
if( firstChar === "#" ){
return document.getElementById(selector.substring(1));
}else if(firstChar === "."){
return context.getElementsByClassName(selector.substring(1));
}else{
return context.getElementsByTagName(selector);
}

}

function getStyle(obj,attr){

    return getComputedStyle(obj)[attr];   

}

2.动画类，包括多种动画效果（第一次知道动画这样写！！！）

/*
MTween 作用，做运动
参数说明：
1. obj 要运动的元素
2. attr 要运动属性
3. duration 持续时间
4. target 目标值
5. fx     运动形式
6. callBack 可选参数 回调函数 是在运动完成之后执行

*/

function MTween(obj,attr,duration,target,fx,callBack){
var current = new Date().getTime();
var b = parseFloat(getComputedStyle(obj)[attr]);
var c = target - b;
var d = duration;
clearInterval(obj.timer);
obj.timer = setInterval(function (){
var t = new Date().getTime() - current;

if( t >= d ){
clearInterval(obj.timer);

//停止运动之后，把timer设为空
obj.timer = null;
t = d;

}

var value = Tween[fx](t, b, c, d);
//判断设置的是透明度，那么不用加单位
if( attr === "opacity" ){
obj.style[attr] = value;
}else{
obj.style[attr] = value + "px";
}

if( t === d ){
typeof callBack === "function" && callBack();
}

},16)

}

/*

* t : time 已过时间

* b : begin 起始值

* c : count 总的运动值

* d : duration 持续时间

* */

//http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html

//Tween.linear();

var Tween = {
linear: function (t, b, c, d){  //匀速
return c*t/d + b;
},
easeIn: function(t, b, c, d){  //加速曲线
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){  //减速曲线
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){  //加速减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){  //加加速曲线
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){  //减减速曲线
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入）
if (t === 0) { 
return b; 
}
if ( (t /= d) == 1 ) {
return b+c; 
}
if (!p) {
p=d*0.3; 
}
if (!a || a < Math.abs(c)) {
a = c; 
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},    
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c; 
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) * 
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){     //回退加速（回退渐入）
if (typeof s == 'undefined') {
  s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 3.70158;  //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}, 
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158; 
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){    //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},       
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},      
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}

}

3。页面的js代码

var oList=$('#list');
var oLi=$('li',list);
var oLiW=parseInt(getComputedStyle(oLi[0]).width)
var len=oLi.length;
oList.style.width=oLiW*len+'px';
var oPrev=$('#prev');
var oNext=$('#next');
var n=1;
oList.style.left=-n*oLiW+'px';
var m=0;
var btns=$('a',$('#btns'));
var timer1=null;
var timer2=null;
var spann=$('.spann');
var h=0;
// fun();
// 文字说明
function textAnimate(i){
if(i&& typeof i!='undefined'){
//for(var i=0;i<spann.length;i++){
//if(ind==i){console.log(spann[i]);
timer2=setInterval(function(){
h++;
spann[i].setAttribute('style','heihgt:0');
spann[i].style.height=h+'px';
if(h===40){
clearInterval(timer2);
setTimeout(function(){
var timer3=setInterval(function(){
var h2=parseInt(getComputedStyle(spann[i]).height);
h2--;
spann[i].style.height=h2+'px';
if(h2===0){
clearInterval(timer3)
}
},50)
},800)
}
},50)
//};
//}
}
}

// 点击右按钮
oNext.onclick=function(){
if(oList.timer){
return
};
n++;
l=-n*oLiW;
MTween(oList,'left',1000,l,'linear',function(){
if(n===len-1){
n=1;
oList.style.left=-n*oLiW+'px';
}
})
// 圆点
m++;
// 清空前状态
for(var i=0;i<btns.length;i++){
btns[i].className='';
}
if(m>btns.length-1){
m=0
}
btns[m].className='active';debugger;
textAnimate(2);
}
// 点击左按钮
oPrev.onclick=function(){
if(oList.timer){
return
};
n--;
l=-n*oLiW;
MTween(oList,'left',1000,l,'linear',function(){
if(n===0){
n=len-2;
oList.style.left=-n*oLiW+'px';
}
})
// 圆点
m--;
for(var i=0;i<btns.length;i++){
btns[i].className='';
};
if(m<0){
m=btns.length-1;
}
btns[m].className='active';
}
// 点击小圆点
// 遍历小圆点
for(var i=0;i<btns.length;i++){
btns[i].index=i;
btns[i].onclick=function(){
// 清空前状态
for(var j=0;j<btns.length;j++){
btns[j].className='';
}
// 图片状态
n=this.index+1;
l=-n*oLiW;
MTween(oList,'left',1000,l,'linear')
// 小圆点背景
btns[this.index].className='active';
m=this.index
}

}
// 自动播放
// function fun(){
// if(oList.timer){
// return
// };
// timer1=setInterval(function(){
// n++;
// l=-n*oLiW;
// MTween(oList,'left',1000,l,'linear',function(){
// if(n===len-1){
// n=1;
// oList.style.left=-n*oLiW+'px';
// }
// })
// // 圆点
// m++;
// // 清空前状态
// for(var i=0;i<btns.length;i++){
// btns[i].className='';
// }

// if(m>btns.length-1){
// m=0
// }
// btns[m].className='active'
// },1500)
// //说明文字

// }

（注：演示的demo，功能并不完全，供人学习）