原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；

这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；

原理：我们创建一个div，下图共红色部分；然后再div中创建一个<ul>，并且<ul>里面放置6个<li>,

每个<li> 中放置一张图片，前三张图片和后三张图片是重复的，如图标记1，2，3；

我们让div 里面<ul> 超出部分隐藏，只看见前面三张图片，如图第一种状态；

然后让 <ul> 整体向左移动，这样就实现了图片的滚动效果，

当第三张图片滚出div的左边界时，我们再设置 <ul>的marginLeft值，

让 <ul> 回到第一种状态；之后就是不断重复这个过程；

代码实现：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无缝滚动轮播图</title>
        <style type="text/css">
           #container{
               width:300px;
               height:200px;
               border:1px solid red;
               overflow:hidden;
           }
           ul{
               list-style-type:none;
               width:600px;
               border:1px solid green;
               padding:0px;
           }

           ul li{
               display:inline-block;
               width:100px;
               height:100px;
           }

           img{
               width:100%;

           }
        </style>
    </head>
    <body>
        <div id="container">
            <ul id="content">
                <li><img src="lb0.jpg">
                <li><img src="lb1.jpg">
                <li><img src="lb2.jpg">
                <li><img src="lb0.jpg">
                <li><img src="lb1.jpg">
                <li><img src="lb2.jpg">
            </ul>
        </div>
        <script>
           window.onload=function(){
                var obj=document.getElementById("content");
                obj.style.marginLeft=0+"px"; 
                function move(){
                   console.log(obj.style.marginLeft);
                   if(parseInt(obj.style.marginLeft)<=-300){
                       obj.style.marginLeft=0+"px";
                   }else{
                       obj.style.marginLeft=parseInt(obj.style.marginLeft)-1+"px";
                   }
                }
                setInterval(move,25);
           }
        </script>
    </body>
</html>

你可能会疑惑上面<li>为什么不闭合，因为 inline-block 会让<li>之间产生间隙，这样做是为了

消除间隙，这只是其中一种方式；

来源：CSDN

作者：cvper

链接：https://blog.csdn.net/cvper/article/details/79811198

标签

轮播