原生js实现旋转轮播图(包括缓动框架封装)_轮播图旋转切换效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_44796453/article/details/89336010

效果展示

在这里插入图片描述

代码展示

css部分

@charset "UTF-8";
/*初始化  reset*/
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {

    margin: 0;
    padding: 0

}

body, button, input, select, textarea {

    font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
    color: #666;

}

ol, ul {

    list-style: none

}

a {
    text-decoration: none
}

fieldset, img {
    border: 0;
    vertical-align: top;
}

a, input, button, select, textarea {
    outline: none;
}

a, button {
    cursor: pointer;
}

.wrap {
    width: 1200px;
    margin: 10px auto;
}

.slide {
    height: 500px;
    position: relative;
}

.slide li {
    position: absolute;
    left: 200px;
    top: 0;


}

.slide li img {
    width: 100%;
}

.arrow {
    opacity: 0;
}

.prev, .next {
    width: 76px;
    height: 112px;
    position: absolute;
    top: 50%;
    margin-top: -56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}

.next {
    right: 0;
    background-image: url(../images/next.png);
}

html以及javascript部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css"/>

</head>
<body>

    <div class="wrap" id="wrap">
       <div class="slide" id="slide">
           <ul>
               <!--五张图片-->
               <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>

           </ul>
           <!--左右切换按钮-->
           <div class="arrow" id="arrow">
               <a href="javascript:;" class="prev"></a>
               <a href="javascript:;" class="next"></a>
           </div>
       </div>
    </div>


    <script>
        var arr = [
            {   //  1
                width:400,
                top:70,
                left:50,
                opacity:20,
                zIndex:2
            },
            {  // 2
                width:600,
                top:120,
                left:0,
                opacity:80,
                zIndex:3
            },
            {   // 3
                width:800,
                top:100,
                left:200,
                opacity:100,
                zIndex:4
            },
            {  // 4
                width:600,
                top:120,
                left:600,
                opacity:80,
                zIndex:3
            },
            {   //5
                width:400,
                top:70,
                left:750,
                opacity:20,
                zIndex:2
            }
        ];

//        黄健

        var liArr=document.getElementsByTagName("li");

        run();

        var wrap=document.getElementById("wrap");
        var arrow=document.getElementById("arrow");
        var btns=arrow.children;
        wrap.function(){
            animate(arrow,{"opacity":100})
        }
        wrap.function(){
            animate(arrow,{"opacity":0})
        }
        console.log(btns);
        var boo=true;
        btns[0].function(){
            if(boo){
                arr.push(arr.shift());
                boo=false;
                run(function(){
                    boo=true
                })
            }
        }
        btns[1].function(){
            if(boo){
                arr.unshift(arr.pop());
                boo=false;
                run(function(){
                    boo=true
                })
            }
        }

        function run(callback){
            for(var i=0;i<liArr.length;i++){
                animate(liArr[i],arr[i],callback)
            }
        }











//        封装获取外链样式
        function getStyle(ele,attr){
            if(ele.currentStyle!=undefined){
                return ele.currentStyle[attr];
            }else{
                return window.getComputedStyle(ele,null)[attr];
            }
        }
//        封装多个缓动框架
        function animate(ele,json,callback){
            clearInterval(ele.timer);
            var step;
            var nowState;
            var boo;
            ele.timer=setInterval(function(){
                boo=true;
                for(var k in json){
                    if(k=="opacity"){
                        nowState=getStyle(ele,k)*100 || 0;
                    }else{
                        nowState=parseInt(getStyle(ele,k)) || 0;
                    }
                    step=(json[k]-nowState)/10;
                    step=step>0?Math.ceil(step):Math.floor(step);
                    nowState=step+nowState;
                    if(k=="opacity"){
                        ele.style[k]=nowState/100;
                    }else if(k=="zIndex" || k=="z-index"){
                        ele.style[k]=nowState;
                    }else{
                        ele.style[k]=nowState+"px";
                    }
                    if(Math.abs(json[k]-nowState)>Math.abs(step)){
                        boo=false
                    }
                }
                if(boo){
                        clearInterval(ele.timer);
                        for(k in json){
                            if(k=="opacity"){
                                ele.style[k]=json[k]/100;
                            }else if(k=="zIndex" || k=="z-index"){
                                ele.style[k]=json[k];
                            }else{
                                ele.style[k]=json[k]+"px";
                            }
                        }
                        if(typeof callback=="function"){
                            callback();
                        }
                    }


            },25)
        }
    </script>
</body>
</html>