js实现无缝轮播

最新推荐文章于 2024-04-08 16:26:29 发布

渣渣前端

最新推荐文章于 2024-04-08 16:26:29 发布

阅读量229

点赞数

分类专栏：前端文章标签：无缝轮播

本文链接：https://blog.csdn.net/dtbk123/article/details/104124483

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    .box{width:400px;
        height:300px;
        margin:30px auto;
        position: relative;
        overflow: hidden;
    }
    ul{ position: absolute;
        width:2000px;
        height:300px;
        top:0;
        left:-400px;
    }
    li{list-style: none;
        width:400px;
        float: left;
        height:300px;
    }
    img{width:100%;
        height:100%;
    }
    .left{position: absolute;
        top:130px;
        left:0;
         width:50px;
         height:80px;
        background-color: rgba(0,0,0,0.4);
        border:none;
    }
    .right{position: absolute;
        top:130px;
        right:0;
         width:50px;
         height:80px;
        background-color: rgba(0,0,0,0.4);
        border:none;
    }

    </style>
</head>
<body>
    <div class="box">
        
        <ul>
            <li><img src="3.jpg"></li>
            <li><img src="1.jpg"/></li>
            <li><img src="2.jpg"/></li>
            <li><img src="3.jpg"/></li>
            <li><img src="1.jpg"/></li>
        </ul>
       
        <button class="left">←</button>
        <button class="right">→</button>
    </div>
    <script>
        var box=document.getElementsByClassName('box')[0]
        var ul=document.getElementsByTagName('ul')[0]
        var li=document.getElementsByTagName('li');
        var left=document.getElementsByClassName('left')[0]
        var right=document.getElementsByClassName('right')[0]
        var arr=[-400,-800,-1200,400,800,1200]
        var dot=document.getElementsByTagName('span');

        function getStyle(e){
            return e.currentStyle||getComputedStyle(e)
        }

        var index=0;
        function fn(ele,width,time,index){
            
            var date=new Date();
           var prev=parseInt(getStyle(ul)['left'])
           if(arr.indexOf(prev)<0)return;
       
            function run(){
                var date1=new Date();
                var distance=(date1-date)/time*width;

              if(width>0){
                  
                if(distance>width){
                    distance=width
                    ele.style.left=prev-distance+'px'
                   if(prev==-1200){
                       ele.style.left=-400+'px';
                   }
                    return}else{
                        ele.style.left=prev-distance+'px'
                requestAnimationFrame(run)
                    }
            }else{
                
                if(distance<width){
                   
                    distance=width
                    ele.style.left=prev-distance+'px'
                    if(prev==-400){
                        ele.style.left=-1200+'px'
                    }
                    if(prev==-1600){
                        ele.style.left=-400+'px'
                    }
                
                return}else{
                    ele.style.left=prev-distance+'px'
                requestAnimationFrame(run)
                }
            }
            }
            requestAnimationFrame(run)
        }

        function fns(width){
          
            fn(ul,width,2000,index%3);
            index++
        }
   var timer=setInterval(fns.bind(this,400),3000)
   
         box.onmouseover=function(){
           
             clearInterval(timer)
             timer=null;
         }
         box.onmouseout=function(){
             timer=setInterval(fns.bind(this,400),3000)
         }
         left.onclick=function(){
             fns.bind(this,400)();
           
         }
         right.onclick=function(){
             fns.bind(this,-400)()
             
         }


       
    </script>
</body>
</html>