循环滚动。并且滚动一条暂停一秒。

59 阅读 0 评论 39 点赞

我是靠谱客的博主陶醉保温杯，最近开发中收集的这篇文章主要介绍循环滚动。并且滚动一条暂停一秒。，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xhtml="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> 间断滚动 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
  body,div {margin:0;padding:0;}
  #out {width:300px;height:100px;border:1px red solid;overflow:hidden;}
  #run {width:300px;overflow:hidden;}
  #inside {width:300px;height:100px;float:left;}
  #inside2 {width:300px;height:100px;float:left;}
  img {float:left;}
</style>
</head>
<body>
<div id='out'>
  <div id='run'>
   <div id='inside'>
    <img src='images/tu1.jpg'/>
    <img src='images/tu2.jpg'/>
    <img src='images/tu3.jpg'/>
   </div>
   <div id='inside2'></div>
  </div>
</div>
<script type="text/javascript">
  var outer=document.getElementByIdx_x("out"); //获取外层div
  var in_one=document.getElementByIdx_x("inside"); //获取内层需要实现滚动效果的div
  var in_two=document.getElementByIdx_x("inside2"); //获取内层需要重复滚动效果的div
  in_two.innerHTML=in_one.innerHTML; //将第一个div的html内容赋给第二个div
  var ff;  //声明全局变量
  function begin(){
   if (outer.scrollTop>=in_one.scrollHeight)//当向上滚动的距离等于子标签的高度
   {
    outer.scrollTop=0; //向上的位移重新为归零
   }
   else{
    outer.scrollTop++;
   }
   if (outer.scrollTop%in_one.offsetHeight==0)//通过求余计算循环滚动的条件
   {
    clearInterval(t);
    ff=setTimeout("t=window.setInterval(begin,10)",1000);//达到条件时执行定时器
   }
  }
  var t=window.setInterval(begin,10);
  outer.οnmοuseοver=function (){clearTimeout(ff);clearInterval(t);} //定义鼠标事件清除定时器
  outer.οnmοuseοut=function (){t=window.setInterval(begin,10);} //定义鼠标事件重新执行定时器
</script>
</body>
</html>