无缝滚动程序

<style>a{display:block;font-size:15px};</style>
<div id="div1" style="width:300px;height:68px;overflow:hidden">
  <a href="javascript:">1,你可曾有过无数的梦想,</a>
  <a href="javascript:">2,却在时光的流逝里幻灭 </a>
  <a href="javascript:">3,你可曾对未来期待憧憬,</a>
  <a href="javascript:">4,却在成长的岁月中迷失</a>
  <a href="javascript:">5,CSDN中国程序员论坛</a>
  <a href="javascript:">6,大家一起来</a>
  <a href="javascript:">7,好象都很不错的样子</a>
</div> 

<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

上面显示的是四行,如果只要1行,或者几行 改这里height:68px
只显示1行:
<div id="div1" style="width:300px;height:15px;overflow:hidden">

 

2.滚动图片

<style>img{display:block}</style>
<div id="div1" style="width:221px;height:187px;overflow:hidden">
<img src=http://zi.csdn.net/beijing-nightclass221x187.JPG>
<img src=http://zi.csdn.net/intel-zq221_187.jpg>
<img src=http://zi.csdn.net/microsoft221_187.jpg>
<img src=http://www.csdn.net/adv/homepage/20060429_Martin.gif>
</div> 

<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

3.横向

 

<div id="div1" style="width:884px;height:187px;overflow:hidden">
<img src=http://zi.csdn.net/beijing-nightclass221x187.JPG>
<img src=http://zi.csdn.net/intel-zq221_187.jpg>
<img src=http://zi.csdn.net/microsoft221_187.jpg>
<img src=http://www.csdn.net/adv/homepage/20060429_Martin.gif>
</div> 

<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,500)}
</script>

发表评论

您的电子邮箱地址不会被公开。