首页 > 代码库 > js实现无缝轮播

js实现无缝轮播

2024-10-17 21:29:39   212人阅读

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>23333</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.onload=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.onmouseover=function(){      
          clearInterval(timer);     
  };     
      oUl.onmouseout=function(){    
          timer=setInterval(function(){     
            if(Math.abs(oUl.offsetLeft)>=liWidth*liCount){      
               oUl.style.left="0px";          
            }         
            oUl.style.left=oUl.offsetLeft+speed+‘px‘;    
          },100)    
       }   
    }
</script>

js实现无缝轮播


联系
我们