简陋轮播

无聊做了一个简陋的轮播

原理如动图

即在最边的地方加了一个假冒的第一个,且图层比真的都要高.

当运行到第三个的时候,假冒的那个刚好也紧随最后一个,到达指定地方,

把真的给覆盖,

此时,再把真的left初始化为0,就给人一个错觉是循环的

在父级加了overflow:hidden之后,就变成

 

代码如下

  1     <style type="text/css">
  2         * {
  3             margin: 0;
  4             padding: 0;
  5             color:white;
  6             font-size: 18px;
  7             text-align: center;
  8             line-height: 50px;
  9         }
 10 
 11         body {
 12             font-family: "Microsoft Yahei";
 13         }
 14 
 15         ul, ol {
 16             list-style: none;
 17         }
 18 
 19         a {
 20             text-decoration: none;
 21         }
 22         #box{
 23             position: relative;
 24             width:200px;
 25             height:50px;
 26             overflow: hidden;
 27         }
 28         #content{
 29             position: absolute;
 30             top:0;
 31             left:0;
 32             width: 800px;
 33         }
 34         #content li{
 35             float:left;
 36             width:200px;
 37             height:50px;
 38         }
 39         #yc{
 40             position: absolute;
 41             right:-200px;
 42             top: 0;
 43             z-index:5;
 44             width:200px;
 45             height:50px;
 46             background: red;
 47         }
 48     </style>
 49 </head>
 50 <body>
 51     <div id="box">
 52         <ul id="content">
 53             <li style="background: red">1</li>
 54             <li style="background: blue">2</li>
 55             <li style="background: green">3</li>
 56         </ul>
 57         <div id="yc">1</div>
 58     </div>
 59     <script>
 60         //获取元素
 61         let ul = document.getElementsByTagName("ul")[0],
 62             liarr = document.getElementsByTagName("li"),
 63             yc = document.getElementById("yc");
 64 
 65         let a=0,    //ul移动的距离
 66             index=1,    //移动到第几个
 67             timer,      //requestAnimationFrame
 68             maxlength=liarr.length-1,   //获取最大长度
 69             c=-200;    //隐藏与第一个元素相同
 70 
 71 
 72         let yidong = function () {
 73 
 74             //当ul移动的距离为200乘index的时候,停止移动
 75             if(a===200*index){
 76                 cancelAnimationFrame(timer);
 77                 index++;
 78             }
 79 
 80             //其他情况照常
 81             else{
 82                     a++;
 83                     timer =requestAnimationFrame(yidong);
 84 
 85                 //当ul移动到最后一个的时候,与第一个相同的假冒元素移动.
 86                     if(a>200*maxlength){
 87                         if(c===0){      //当假冒元素移动到最左边时,初始化所有.
 88                             c=-200;
 89                             a=0;
 90                             index=0;
 91                         }
 92                         c++;
 93                     }
 94                     yc.style.right=c+'px';
 95                     ul.style.left=-a+'px';
 96                 }
 97             };
 98         setInterval(yidong,2000);       //启动定时器
 99    </script>
100 </body>

 

posted @ 2018-03-12 15:27  灰犀  阅读(144)  评论(0)  编辑  收藏  举报