其他分享
首页 > 其他分享> > 原生js匀速动画实现无缝轮播

原生js匀速动画实现无缝轮播

作者:互联网

效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 500px;
            height: 200px;
            padding:5px;
            border:1px solid #000;
            margin:100px auto;
        }
        #inner{
            width: 500px;
            height: 200px;
            position:relative;
            overflow:hidden;
        }
        ul{
            width:600%;
            list-style:none;
            position:absolute;
        }
        ul>li{
            float:left;
            width: 500px;

        }
        ol{
            position:absolute;
            list-style:none;
            right:30px;
            bottom:20px;
        }
        ol>li{
            float:left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border:1px solid #000;
            border-radius:20px;
            text-align:center;
            margin-right:15px;
            cursor:pointer;
        }
        span {
            display: inline-block;
            width: 30px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            position: absolute;
            top: 100px;
            margin-top: -30px;
            background-color: rgba(0, 0, 0, 0.2);
        }
        #switch_button{
            display: none;
        }
        #switch_button>span:nth-child(2){
            right:0;
        }
        ol>li.current{
            background-color:orange;
            color:white;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="inner">
            <ul>
                <li><img src="image/1.jpg" alt=""></li>
                <li><img src="image/2.jpg" alt=""></li>
                <li><img src="image/3.jpg" alt=""></li>
                <li><img src="image/4.jpg" alt=""></li>
                <li><img src="image/5.jpg" alt=""></li>
            </ul>
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
            <div id="switch_button">
                <span><</span>
                <span>></span>
            </div>
        </div>
    </div>
    <script>
        var box=document.getElementById("box");
        var switchButton=document.getElementById("switch_button");
        var ul=document.getElementsByTagName("ul")[0];
        var moveWitch=ul.children[0].offsetWidth;
        var ol=document.getElementsByTagName("ol")[0];
        var oliArr=ol.children;
        var spanArr=switchButton.children;
        var index=0;
        var circleIndex=0;
        box.onmouseover=function(){
            switchButton.style.display="block";
            clearInterval(timer)
        };
        box.onmouseout=function(){
            switchButton.style.display="none";
            timer=setInterval(autoPlay,2000);
        };
        ul.appendChild(ul.children[0].cloneNode(true));
        var timer=setInterval(autoPlay,2000);
        function autoPlay(){
            index++;
            if(index>ul.children.length-1){
                ul.style.left=0;
                index=1
            }
            aa(ul,-index*moveWitch);
            circleIndex++;
            if(circleIndex>oliArr.length-1){
                circleIndex=0;
            };
            for(var i=0;i<oliArr.length;i++){
                oliArr[i].removeAttribute("class");
            }
            oliArr[circleIndex].setAttribute("class","current")
        };
        for(var i=0;i<oliArr.length;i++){
            oliArr[i].index=i;
            oliArr[i].onclick=function(){
                if(index==ul.children.length-1){
                    index=0;
                    ul.style.left=0;
                }
                for(var i=0;i<oliArr.length;i++){
                    oliArr[i].removeAttribute("class")
                }
                this.setAttribute("class","current");
                aa(ul,-this.index*moveWitch);
                index=circleIndex=this.index;
            }
        }
        spanArr[0].onclick=function(){
            index--;
            if(index<0){
                index=ul.children.length-2;
                ul.style.left=-(ul.children.length-1)*moveWitch+"px";
            }
            aa(ul,-index*moveWitch);
            circleIndex--;
            if(circleIndex<0){
                circleIndex=oliArr.length-1;
            };
            for(var i=0;i<oliArr.length;i++){
                oliArr[i].removeAttribute("class")
            }
            oliArr[circleIndex].setAttribute("class","current")
        };
        spanArr[1].onclick=function(){
            autoPlay()
        }
        function aa(ele,endx){
            var speed;
            clearInterval(ele.timer);
            if(endx>ele.offsetLeft){
                speed=10;
            }else if(endx<ele.offsetLeft){
                speed=-10;
            }else{
                speed=0;
            };
            ele.timer=setInterval(function(){
                ele.style.left=ele.offsetLeft+speed+"px";
                if(Math.abs(endx-ele.offsetLeft)<Math.abs(speed)){
                    clearInterval(ele.timer);
                    ele.style.lfet=endx+"px";
                }
            },20)
        }
    </script>
</body>
</html>

 

标签:ol,轮播,width,children,js,ul,var,height,匀速
来源: https://blog.csdn.net/ramosTears123/article/details/88796220