声明，该DEMO依托于某个培训机构中，非常感谢这个培训结构。话不多说，现在开始改demo的制作。
首先，在前端的学习过程中，轮播图是我们一定要学习的，所以为了更加高效的实现各种轮播图，封装了一个运动的框架。
function animate(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
var current = 0;
for(var attr in json){
if(attr == 'opacity'){
current = parseInt(getStyle(obj,attr)*100);
}else{
current = parseInt(getStyle(obj,attr));
};
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
var current = 0;
for(var attr in json){
if(attr == 'opacity'){
current = parseInt(getStyle(obj,attr)*100);
}else{
current = parseInt(getStyle(obj,attr));
};
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//先判断<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>是否为透明度
if(attr == 'opacity'){
//首先判断浏览器是否<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>opacity
if('opacity' in obj.style){
obj.style.opacity = (current + step) / 100;
}else{
obj.style.filter = 'alpha(opacity = ' + (current + step) + ')';
}
//再判断<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>是否为z-index
}else if(attr == 'zIndex'){
obj.style.zIndex = json[attr];
//最后再判断
}else{
obj.style[attr] = current + step + 'px';
}
if(current != json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
}},5);
}
在该框架中兼容了不同的浏览器，并且允许传入opacity和z-index这样的属性，当然，像width,height,left,right这样常见的属性是必不可少的。利用该框架，可以实现非常棒的效果。所以现在开始正式做该DEMO。
首先是index.html的制作。
Box">
