javascript 间隔时间滚动的图文小栏目

作者：袖梨 2022-07-02

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

*{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(http://www.111com.net/blog/upload/image/20100507201433.jpg) left center repeat-x;border-bottom:1px solid #dedede;} span{float:right;} #btm{position:absolute;right:0;top:60px;background:url(http://www.111com.net/blog/upload/image/20100507201546.gif) no-repeat;overflow:hidden;} #btm a{display:block;} #btm a#up:hover{background:url(http://www.111com.net/blog/upload/image/20100507201546.gif) -13px top no-repeat;} #btm a#dw:hover{background:url(http://www.111com.net/blog/upload/image/20100507201546.gif) -26px -22px no-repeat;}</style></p>
<p> </p>

<div class="rig">
<h5><span><a href="#">更多>></a></span>精彩企业专题</h5>
<div id="qy" style="margin: 7px 10px 5px; overflow: hidden;  " onmouseout="qiScrollAmount=2" onmouseover="qiScrollAmount=0">
<ul>
    <li id="tab1">
    <table cellspacing="0" cellpadding="0" width="256" border="0">
        <tbody>
            <tr>
                <td height="70"><a href="#"><img  alt="javascript 间隔时间滚动的图文小栏目"  alt="" src="https://img.111com.net/get_pic/2010/03/20100507135753921.jpg" /></a></td>
            </tr>
            <tr>
                <td height="24"><span><a href="#">进入专题</a></span>
                <p><a href="#">徐工集团专题</a></p>
                </td>
            </tr>
            <tr>
                <td height="70"><a href="#"><img  alt="javascript 间隔时间滚动的图文小栏目"  alt="" src="https://img.111com.net/get_pic/2010/03/20100507135801544.jpg" /></a></td>
            </tr>
            <tr>
                <td height="24"><span><a href="#">进入专题</a></span>
                <p><a href="#">三一重工专题</a></p>
                </td>
            </tr>
        </tbody>
    </table>
    </li>
    <li id="tab2"> </li>
</ul>
</div>
<div id="btm"> </div>
</div>
<script language="javascript">
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=2000;//每次停留时间
var speed2=1;//滚动速度
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==2*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==2*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=2*qiLineHeight;
		qoMarquee.scrollTop -=amount;
		if ( qoMarquee.scrollTop % qiLineqiScrollAmount = 2", speed1 );}
		else window.setTimeout( dw(), 1 );
}
window.setTimeout( "run()", speed1 );
</script>
<p> </p>
<p> </p>

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

javascript 间隔时间滚动的图文小栏目

相关文章

精彩推荐