原生JS实现旋转轮播图

最新推荐文章于 2022-05-24 16:06:06 发布

前端薛之谦...

最新推荐文章于 2022-05-24 16:06:06 发布

阅读量1.2k

点赞数 3

分类专栏： js 文章标签：轮播图

本文链接：https://blog.csdn.net/weixin_41105030/article/details/88586220

版权

效果图

自动轮播效果图 ](https://img-blog.csdnimg.cn/20190316183332868.gif)

js获取属性

getComputedStyle
window.getComputedStyle(element, [pseudoElt])方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
currentStyle
Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.

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

缓动动画的封装

这里直接上函数，思路可以参考该档:https://blog.csdn.net/weixin_41105030/article/details/88566558;当然也可以使用jquery提供的动画API；下面是原生JS的实现

// 第一个参数是调用的元素，第二参数是css属性和值，对象，第三个参数是回调函数
function animate(ele,cssObj,fn){
   
    //先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
   
        //开闭原则
        var bool = true;
        for(var k in cssObj){
   
            var leader;
            //判断如果属性为opacity的时候特殊获取值
            if(k === "opacity"){
   
                leader = getStyle(ele,k)*100 || 1;
            }else{
   
                leader = parseInt(getStyle(ele,k)) || 0;
            }
            //1.获取步长
            var step = (cssObj[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            if(k === "opacity"){
   
                ele.style[k] = leader/100;
                //兼容IE678
                ele.style.filter = "alpha(opacity="+leader+")";
            }else if(k === "zIndex"){
   
                ele