js 图片新闻间隔时间滚动效果

作者：袖梨 2022-06-25

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

<div class="rig">
  <h5>
<span><a href="https://www.111cn.net/13083962">更多>></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="https://www.111cn.net/13335574"><img src="https://img.111cn.net/uploads/20220926/img_6331724ac56f130.jpg"></a></td>
          </tr>
          <tr>
            <td height="24">
<span><a href="https://www.111cn.net/13335574">进入专题</a></span>
              <p><a href="https://www.111cn.net/13335574">广州市巨和机械专题</a></p>
</td>
          </tr>
          
          <tr>
            <td height="70"><a href="https://www.111cn.net/13295702"><img src="https://img.111cn.net/uploads/20220926/img_6331724aec75f31.jpg"></a></td>
          </tr>
          <tr>
            <td height="24">
<span><a href="https://www.111cn.net/13295702">进入专题</a></span>
              <p><a href="https://www.111cn.net/13295702">徐工集团专题</a></p>
</td>
          </tr>
          
          <tr>
            <td height="70"><a href="https://www.111cn.net/13035462"><img src="https://img.111cn.net/uploads/20220926/img_6331724b139b032.jpg?1259836876"></a></td>
          </tr>
          <tr>
            <td height="24">
<span><a href="https://www.111cn.net/13035462">进入专题</a></span>
              <p><a href="https://www.111cn.net/13035462">三一重工专题</a></p>
</td>
          </tr>
        </table>
      </li>
      <li id="tab2">
    </ul>
  </div>
  <style>
    #btm{position:absolute;right:0;top:60px;background:url(http://pigimg.z**h*ongso.com/space/gallery/infoimgs/gc/gcqZj/20100417/2010041716281352947.gif) no-repeat;overflow:hidden;}
	#btm a{display:block;}
	#btm a#up:hover{background:url(http://pigimg.z**h*ongso.com/space/gallery/infoimgs/gc/gcqZj/20100417/2010041716281352947.gif) -13px top no-repeat;}
	#btm a#dw:hover{background:url(http://pigimg.z**h*ongso.com/space/gallery/infoimgs/gc/gcqZj/20100417/2010041716281352947.gif) -26px -22px no-repeat;}
  </style>
  <div id="btm"></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>

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

js 图片新闻间隔时间滚动效果

相关文章

精彩推荐