Fork me on GitHub

旋转轮播图

与一般轮播图不同,用缓动动画做,我们需要简单封装一个缓动框架

function animate (ele,json,fn){
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值,分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){//遍历Jason里面的属性k
//四部
//获取他的属性时就需要单独处理
var leader;
//如果获取里面的属性是opacity时
if(k===”opacity”){
leader=getStyle(ele,k)*100||1;//获取到的是小数0.3
}else {
leader= parseInt(getStyle(ele,k)) || 0;//否则老样子
} leader + step;
//3.赋值
//赋值时也要单独处理
if(k===”opacity”){
ele.style[k]=leader/100;//这种火狐chromeIE9以上都 可以
//兼容IE678
ele.style.filter=”alpha(opacity=”+leader+”)”;//这时leader是乘100的在这里透明度是以百分比
//如果是层级,一次性赋值成功,不需要缓动赋值
}else if (k===”zIndex”){
ele
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader =.style.zIndex=json[k];
}
else {
ele.style[k] = leader + “px”;
}
//4.清除定时器
//判断: 目标值和当前值的差大于步长,就不能跳出循环
//不考虑小数的情况:目标位置和当前位置不相等,就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
//只有所有的属性都到了指定位置,bool值才不会变成false;
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了,现在可以执行回调函数了
//只有传递了回调函数,才能执行
if(fn){
fn();
}
}
},25);
}

兼容方法获取元素样式可以用这个

function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)\[attr\];
    }
    return ele.currentStyle\[attr\];
}

另外js中四中操作数组的方法: json.push();//在最后添加 json.pop();//删除最后一位 json.unshift();//在最前面添加 json.shift();//删除第一位

-------------本文结束感谢您的阅读-------------

本文标题:旋转轮播图

文章作者:陈晓拉尼

发布时间:2017年07月31日 - 09:07

最后更新:2018年09月13日 - 23:09

原始链接:http://yoursite.com/archives/18051.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。