javascript图片时间间隔滚动效果

作者：简简单单 2011-04-22

提示：您可以先修改部分代码再运行

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>会员板块</title>
<base target="_blank">
<style>
*{margin:0;padding:0;border:0;list-style:none;}
body{font:12px verdana, geneva, sans-serif;line-color:#333;}
a{text-decoration:none;color:#004285;font-size:14px;font-weight:bold;}
a:hover{text-decoration:underline;color:#c33;}
.rig{border:1px solid #dedede;margin-bottom:5px;position:relative;background:#fff;}
#qy a{font-size:12px;}
h5 span a{font-size:12px;font-weight:normal;color:#333;}
h5{padding:0 10px;font-size:14px;line-background:url(/space/gallery/工程起重机/971669-1.jpg?1259835263) left center repeat-x;border-bottom:1px solid #dedede;}
span{float:right;}
</style>
</head>
<body>
<div class="rig">
  <h5><span><a href="http://www.111com.net/">更多>></a></span>精彩企业专题</h5>
  <div id="qy" style="margin:7px 10px 5px;overflow:hidden" onmouseover="qiscrollamount=0"
onmouseout="qiscrollamount=2">
    <ul>
      <li id="tab1">
        <table border='0' cellspacing='0' cellpadding='0' width='256px'>
          <tr>
            <td  height='70'><a href="/channel/13335574"><img  src="/space/gallery/infoimgs/gc/gcqzj/20100520/2010052017415793313.jpg" /></a></td>
          </tr>
          <tr>
            <td  height='24'><span><a href="/channel/13335574">进入专题</a></span>
              <p><a href="/channel/13335574">广州市巨和机械专题</a></p></td>
          </tr>
          
          <tr>
            <td  height='70'><a href="/channel/13295702"><img  src="/space/gallery/infoimgs/gc/gcqzj/20100415/2010041515380563250.jpg" /></a></td>
          </tr>
          <tr>
            <td  height='24'><span><a href="/channel/13295702">进入专题</a></span>
              <p><a href="/channel/13295702">徐工集团专题</a></p></td>
          </tr>
          
          <tr>
            <td  height='70'><a href="/channel/13035462"><img  src="/space/gallery/工程起重机/971677-1.jpg?1259836876" /></a></td>
          </tr>
          <tr>
            <td  height='24'><span><a href="/channel/13035462">进入专题</a></span>
              <p><a href="/channel/13035462">三一重工专题</a></p></td>
          </tr>
        </table>
      </li>
      <li id="tab2"></li>
    </ul>
  </div>
  <style>
    #btm{position:absolute;right:0;top:60px;background:url(/space/gallery/infoimgs/gc/gcqzj/20100417/2010041716281352947.gif) no-repeat;overflow:hidden;}
	#btm a{display:block;}
	#btm a#up:hover{background:url(/space/gallery/infoimgs/gc/gcqzj/20100417/2010041716281352947.gif) -13px top no-repeat;}
	#btm a#dw:hover{background:url(/space/gallery/infoimgs/gc/gcqzj/20100417/2010041716281352947.gif) -26px -22px no-repeat;}
  </style>
  <div id="btm"><a id="up" onclick="up()" href="javascript:;" target="_self"></a><a id="dw" onclick="dw()" href="javascript:;" target="_self"></a></div>
<script>
var qomarquee = document.getelementbyid("qy"); //滚动对象
var tab1 = document.getelementbyid("tab1");
var tab2 = document.getelementbyid("tab2");
var qiline;//单行高度，像素ie
var qilinecount = 0; //实际行数
var qiscrollamount = 2; //每次滚动高度，像素（速度）
var speed1=3000;//每次停留时间
var speed2=1;//滚动速度
var num=qomarquee.getelementsbytagname('img').length;//总数
tab2.innerhtml=tab1.innerhtml;
var alink=document.getelementbyid('btm').getelementsbytagname('a');
for(var i=0;i<alink.length;i++){
	alink[i].onfocus=function(){this.blur();}
}
function run() {
	if(qomarquee.scrolltop==num*qilineheight){qomarquee.scrolltop=0;window.settimeout( "run()", speed2 );}//重置并接着滚动
	else{
		qomarquee.scrolltop +=qiscrollamount;
		if ( qomarquee.scrolltop % qilinerun()", speed1 );}//如果满格等待n秒
		else {window.settimeout( "run()", speed2 );}//正常滚动
	}
}
function up(){
		qiscrollamount = 0;
		var amount=1;
		if(qomarquee.scrolltop==num*qilineheight) qomarquee.scrolltop=0;
		qomarquee.scrolltop +=amount;
		if ( qomarquee.scrolltop % qilineqiscrollamount = 2", speed1 );}
		else window.settimeout( up(), 1 );
}
function dw(){
		qiscrollamount = 0;
		var amount=1;
		if(qomarquee.scrolltop==0) qomarquee.scrolltop=num*qilineheight;
		qomarquee.scrolltop -=amount;
		if ( qomarquee.scrolltop % qilineqiscrollamount = 2", speed1 );}
		else window.settimeout( dw(), 1 );
}
window.settimeout( "run()", speed1 );
</script>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

javascript图片时间间隔滚动效果

相关文章

精彩推荐