js代码实现的图片水平无缝滚动效果下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js代码实现的图片水平无缝滚动效果下载

图片水平无缝滚动效果非常的常用，一般用于产品图片的展示等，下面就通过实例代码介绍一下如何实现此效果。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</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>

代码描述：js代码图片水平无缝滚动。js代码实现的图片水平无缝滚动效果下载

下载全部收藏

127 170

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册