js实现类似新闻条目人物简介不间断的滚动

<!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=gb2312" />
<title>无标题文档</title>

<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,blockquote,
dl,dt,dd,ul,ol,li,a,span,i,b,
form,fieldset,legend,button,input,textarea,
th,td{margin:0;padding:0;}
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}

body,
button,input,select,textarea/* for ie */{ color:#333;}
address,em{font-style:normal;}
h1,h2,h3,h4,h5,h6{font-family:"Microsoft YaHei";}

ul,ol{list-style:none;}

a{text-decoration:none; color:#333; cursor:pointer;}
img{ border:0px;}
a:hover{color:#a71f24;}
.clear{clear:both;}

.team{border:1px solid #e5e5e5;background:#f8f8f8;padding-bottom:10px;margin-bottom:10px;}
.teamTitle{height:30px;line-height:30px;background:#015198;font-weight:normal;padding:0 14px;margin-bottom:12px;}
.teamTitle a{float:right;font-size:14px;color:#fff;}
.teamTitle span{font-size:16px;color:#fff;}
.expert{height:113px;/*956px;*/margin:0 auto;}
.expert dl{230px;height:113px;float:left;margin-right:9px;overflow:hidden;}
.expert .e_end{margin-right:0;}
.expert dl dt{84px;float:left;height:113px;margin-right:15px;}
.expert dl dd{130px;float:left;height:113px;}
.expert dl dd h2{line-height:21px;font-weight:normal;font-size:14px;color:#006699;height:20px;}
.expert dl dd p{line-height:19px;color:#666666;height:19px;}
.expert dl dd .adept{margin-bottom:10px;}
.expert dl dd .more{background:url(../img/more.jpg) no-repeat left center;height:22px;text-align:center;line-height:22px;73px;}
.expert dl dd .more a{color:#c60000;}
.expert dl dd p span{color:#333333;}

.expertindex{height:113px;/*956px;*/margin:0 auto;}
.expertindex dl{230px;height:113px;float:left;margin-right:9px;overflow:hidden;}
.expertindex .e_end{margin-right:0;}
.expertindex dl dt{84px;float:left;height:113px;margin-right:15px;}
.expertindex dl dd{130px;float:left;height:113px;}
.expertindex dl dd h2{line-height:21px;font-weight:normal;font-size:14px;color:#006699;height:20px;}
.expertindex dl dd p{line-height:19px;color:#666666;height:19px;}
.expertindex dl dd .adept{margin-bottom:10px;}
.expertindex dl dd .more{background:url(../img/more.jpg) no-repeat left center;height:22px;text-align:center;line-height:22px;73px;}
.expertindex dl dd .more a{color:#c60000;}
.expertindex dl dd p span{color:#333333;}

</style>
</head>

<body>
         
<div class="team" style="position:relative">
    <h2 class="teamTitle"><a href="/index.php?r=archives/guide&id=34&t=1401953186">更多>></a><span>专家团队</span></h2>
    <div style="956px; margin:0 auto; overflow:hidden">
    <div class="expertindex" >
                                                        
        <DIV id=roller_pro style="OVERFLOW: hidden; WIDTH: 970px; HEIGHT: 115px"><TABLE><TR><TD id=roller_pro_content><table width=965px border=0 cellspacing=0 cellpadding=0 align=center><tr>
                                            <td style="padding-left:5px;line-height:20px;color:#0">
                        <dl>
                            <dt><a href="/index.php?r=archives/guide/body&id=27&t=1401953186" target="_blank"><img src="http://www.baidu.com/img/bdlogo.gif" width="84"height="113"/></a></dt>
                            <dd>
                                <h2>杨医生</h2>
                                <p>主任医师</p>
                                <p><span>科 室:</span> 心血管内科</p>
                                <p class="adept"><span>职 务:</span> 科主任兼科研处处长</p>
                                <p class="more"><a href="/index.php?r=archives/guide/body&id=27&t=1401953186" target="_blank">详细介绍</a></p>
                            </dd>
                        </dl>
                    </td>
                                            <td style="padding-left:5px;line-height:20px;color:#0">
                        <dl>
                            <dt><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank"><img src="http://data.baidu.com/image/0605-%E7%8A%80%E5%88%A9%E4%BB%81%E5%B8%88.jpg" width="84"height="113"/></a></dt>
                            <dd>
                                <h2>孙医生</h2>
                                <p>主任医师</p>
                                <p><span>科 室:</span> 呼吸与危重症医学科</p>
                                <p class="adept"><span>职 务:</span> 科主任</p>
                                <p class="more"><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank">详细介绍</a></p>
                            </dd>
                        </dl>
                    </td>
                                            <td style="padding-left:5px;line-height:20px;color:#0">
                        <dl>
                            <dt><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank"><img src="http://www.baidu.com/img/bdlogo.gif" width="84"height="113"/></a></dt>
                            <dd>
                                <h2>孙医生</h2>
                                <p>主任医师</p>
                                <p><span>科 室:</span> 呼吸与危重症医学科</p>
                                <p class="adept"><span>职 务:</span> 科主任</p>
                                <p class="more"><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank">详细介绍</a></p>
                            </dd>
                        </dl>
                    </td>
                    <td style="padding-left:5px;line-height:20px;color:#0">
                        <dl>
                            <dt><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank"><img src="http://www.baidu.com/img/bdlogo.gif" width="84"height="113"/></a></dt>
                            <dd>
                                <h2>孙铁英</h2>
                                <p>主任医师</p>
                                <p><span>科 室:</span> 呼吸与危重症医学科</p>
                                <p class="adept"><span>职 务:</span> 科主任</p>
                                <p class="more"><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank">详细介绍</a></p>
                            </dd>
                        </dl>
                    </td>
                                                
</tr></table></TD><TD id=roller_temp_pro vAlign=top width=></TD></TR></TABLE></DIV>
<script type="text/javascript">
var h_roller_speed_dzcp=25
roller_temp_pro.innerHTML=roller_pro_content.innerHTML
function H_Roller_Marquee_dzcp(){
if(roller_temp_pro.offsetWidth-roller_pro.scrollLeft<=0)
roller_pro.scrollLeft-=roller_pro_content.offsetWidth
else{
roller_pro.scrollLeft++
}
}
var h_roller_variable_dzcp=setInterval(H_Roller_Marquee_dzcp,h_roller_speed_dzcp)
roller_pro.onmouseover=function() {clearInterval(h_roller_variable_dzcp)}
roller_pro.onmouseout=function() {h_roller_variable_dzcp=setInterval(H_Roller_Marquee_dzcp,h_roller_speed_dzcp)}
</script>                
</div>
</div>
</div>

</body>
</html>

原文地址:https://www.cnblogs.com/dearxinli/p/3770857.html