几个简洁的图片无缝滚动代码

一些网页设计中用到的滚动代码，虽然只能说是跳动，但却很精简，大家可以直接拿去用
1.文字的滚动：
<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,年华设计工作室</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">

修改一下：
<ul id="ScrollBox" style="width:300px;height:80px;overflow:hidden;margin:0;padding:0;line-height:20px;font-size:12px;">
<li>1.你可曾有过无数的梦想，</li>
<li>2.却在时光的流逝里幻灭 </li>
<li>3.你可曾对未来期待憧憬，</li>
<li>4.却在成长的岁月中迷失</li>
<li>5.年华设计工作室</li>
<li>6.大家一起来</li>
<li>7.好象都很不错的样子</li>
</ul>
<script type="text/javascript">
var t=setInterval(myfunc,1000);
var oBox=document.getElementById("ScrollBox");
function myfunc(){
var o=oBox.firstChild
oBox.removeChild(o)
oBox.appendChild(o)
}
oBox.onmouseover=function(){clearInterval(t)}
oBox.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>


2.图片滚动
<style>img{display:block}</style>
<div id="div1" style="width:221px;height:187px;overflow:hidden">
<img src=图片地址>
<img src=图片地址>
<img src=图片地址>
<img src=图片地址>
</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>

只需要修改几个字符，就可以横着滚
<div id="div1" style="width:884px;height:187px;overflow:hidden">
<img src=图片地址>
<img src=图片地址>
<img src=图片地址>
<img src=图片地址>
</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>
不断循环向上滚动代码，（不间断滚动）鼠标接触的时候会自动停下来。
<div id="marquees"> <!-- 这些是字幕的内容，你可以任意定义 -->
<p><a href="网址" target="_blank">年华设计</a></p>
<p><a href="网址" target="_blank">
<a href="网址" target="_blank">年华设计</a></a></p>  
<p><a href="网址" target="_blank">年华设计</a></p>
<p><a href="网址" target="_blank">年华设计</a></p>
<p><a href="网址" target="_blank">年华设计</a></p>
<p><a href="网址" target="_blank">百度搜索</a></p>
<p><a href="网址" target="_blank">GOOGLE搜索</a></p>
</div>
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动
}
//这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面：
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer"，直到"templayer"的高度大于内容区高度：
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区：
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时，调用"scrollUp()"函数驱动滚动条：
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了，则向上滚动到和当前画面一样的位置
//当然不仅如此，同样还要向下滚动一个像素(+1)：
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
连续不间断横向滚动图片代码
<table width=700 border=0 cellpadding=0 cellspacing=0>                                                                                                          
<tr><td>                                                                                                                                                                                        
  <div id=www_qpsh_com style=overflow:hidden;height:120px;width:700px;color:#ff0000><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=www_qpsh_com1 valign=top>
  <table border=0 cellpadding=0 cellspacing=0>
  <tr><td><a href=网址 target=_blank><img border=0 src="图片" width=150 height=100 hspace=22></a><br><center><b>说明一</b></center></td>
  <td width=30></td>
  <td><a href=网址 target=_blank><img border=0 src="图片地址" width=150 height=100  hspace=22></a><br><center><b>说明二</b></center></td></td>
  <td width=30></td>
  <td><a href=网址 target=_blank><img border=0 src="图片地址" width=150 height=100  hspace=22></a><br><center><b>说明三</b></center></td>
  <td><a href=网址 target=_blank><img border=0 src="图片地址" width=150 height=100  hspace=22></a><br><center><b>说明四</b></center></td>
  <td width=30></td>
  <td><a href=网址 target=_blank><img border=0 src="图片地址" width=150 height=100  hspace=22></a><br><center><b>说明五</b></center></td>
  </tr>
  </table>
</td><td id=www_qpsh_com2 valign=top></td></tr></table></div>
  <script>
  var speed=10//速度数值越大速度越慢
  www_qpsh_com2.innerHTML=www_qpsh_com1.innerHTML
  function Marquee(){
  if(www_qpsh_com2.offsetWidth-www_qpsh_com.scrollLeft<=0)
  www_qpsh_com.scrollLeft-=www_qpsh_com1.offsetWidth
  else{
  www_qpsh_com.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  www_qpsh_com.onmouseover=function() {clearInterval(MyMar)}
  www_qpsh_com.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>
</td></tr>                                                                                                                                           </table>                        

[本日志由 zero 于 2009-12-24 00:55 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 代码代码