js原生无缝滚动demo

最新推荐文章于 2021-11-17 20:25:01 发布

super晴天

最新推荐文章于 2021-11-17 20:25:01 发布

阅读量882

点赞数

分类专栏： JavaScript Web前端文章标签： html js 无缝滚动

本文链接：https://blog.csdn.net/jp571534020/article/details/48154579

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Web前端

11 篇文章 0 订阅

订阅专栏

1.原理：我们的视觉区域是1234四张图，首先复制一份12345追加到5的后面（如图1的样子），等运动到了2的位置的时候，利用视觉差我们使他瞬间跳回1的样子，就这样往复循环就ok了

、

下面是示例代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
   <style>
   *{
    margin: 0;
    padding: 0;
   }
   ul,li{
    list-style: none;
   }
   .warp{
      height: 150px;
      width: 616px;
      margin: 50px auto;
      overflow: hidden;
      background-color: red;
      position: relative;
   }
   .imgs{
    position: absolute;
   }
  .imgs li{
    width: 150px;
    height: 146px;
    float: left;
    margin: 2px;
    cursor: pointer;
    background-color: yellow;
  }
   </style>
</head>
<body>
	  <div class="warp">
       <ul id="imgs" class="imgs">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ul>  
    </div>
    <script type="text/javascript">
      window.οnlοad=function  () {
           var margin=4;//元素间距
           var speed=-5;//左移速度（右移为正）
           var timer=null;//定时器
           var oUl=document.getElementById("imgs");
           var aLi=oUl.getElementsByTagName("li");
           var liWidth=aLi[0].offsetWidth+margin;//li宽度
           var liCount=aLi.length;//li个数
      
           oUl.innerHTML+=oUl.innerHTML;//复制内容追加

           oUl.style.width=liWidth*aLi.length+'px';
           oUl.style.height=liWidth+'px';

           timer=setInterval(function(){
              //向左移动判断
              if(Math.abs(oUl.offsetLeft)>=liWidth*liCount){
                oUl.style.left="0px";
              }
              //向右的判断
              //if(Math.abs(oUl.offsetLeft)==0){
              //  oUl.style.left=-liCount*liWidth+'px';
              // }
            oUl.style.left=oUl.offsetLeft+speed+'px';
           },100)

           oUl.οnmοuseοver=function(){
              clearInterval(timer);
           }
           oUl.οnmοuseοut=function(){
              
           timer=setInterval(function(){
            if(Math.abs(oUl.offsetLeft)>=liWidth*liCount){
              oUl.style.left="0px";
            }
            oUl.style.left=oUl.offsetLeft+speed+'px';
           },100)
           }
      }
    </script>
</body>
</html>

super晴天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js原生无缝滚动demo

1.原理：我们的视觉区域是1234四张图，首先复制一份12345追加到5的后面（其实只要总个数大于看到的个数就可以不用复制，5>4,我习惯复制一份,如图1的样子），等运动到了2的位置的时候，利用视觉差我们使他瞬间跳回1的样子，就这样往复循环就ok了、下面是示例代码：无缝滚动 *{ margin: 0; padding: 0; } ul,
复制链接

扫一扫