js程式碼實現的圖片水平無縫滾動

螞蟻小編發表於2017-03-16
JS

圖片水平無縫滾動效果非常的常用，一般用於產品圖片的展示等，下面就通過例項程式碼介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#div1{
  width:245px;
  height:150px;
  background:red;
  margin:250px;
  margin-left:500px;
  position:absolute;
  overflow:hidden;
}
#div1 ul li{
  float:left;
  width:44px;
  height:66px;
  margin-top:20px;
  margin-right:5px;
  list-style:none;
  background-color:green;
}
#div1 ul{
  width:250px;
  position:absolute;
  padding:0;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById('div1');
  var oul=odiv.getElementsByTagName('ul')[0];
  var ali=oul.getElementsByTagName('li');
  oul.innerHTML=oul.innerHTML+oul.innerHTML;
  oul.style.width=(ali[0].offsetWidth + 5) * ali.length + 'px';
  function roll(){
    if (oul.offsetLeft<=-oul.offsetWidth / 2) {
      oul.style.left = '0';
    }
    oul.style.left = oul.offsetLeft - 2 + 'px';
  }
  var timer = null;
  timer = setInterval(roll, 30);
  odiv.onmouseover=function(){clearInterval(timer);}
  odiv.onmouseout=function(){timer = setInterval(roll, 30);}
};
</script>
</head>
<body>
<div id="div1">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>

內容可以無縫滾動，當然這裡不是圖片，而是以背景色替代，在實際應用中新增圖片即可。

相關文章