js實現無縫輪播

時間 2019-11-10

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。