javascript 滚动+停留 代码
HTML部分
Javascript代码部份
<style type="text/css">
<!--
ul{height:230px;overflow:hidden}
-->
</style>
<ul id="rolltxt">
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称1</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称2</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称3</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称4</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称5</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称6</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称7</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称8</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称9</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称10</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称11</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称12</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称13</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称14</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称15</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称16</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称17</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称18</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称19</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称20</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称21</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称22</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称23</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称24</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称25</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称26</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称27</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称28</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称29</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称30</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称31</p></li>
</ul>
<!--
ul{height:230px;overflow:hidden}
-->
</style>
<ul id="rolltxt">
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称1</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称2</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称3</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称4</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称5</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称6</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称7</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称8</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称9</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称10</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称11</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称12</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称13</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称14</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称15</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称16</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称17</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称18</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称19</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称20</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称21</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称22</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称23</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称24</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称25</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称26</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称27</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称28</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称29</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称30</p></li>
<li><a href="#"><img src="images/pro.gif" /></a><p>产品名称31</p></li>
</ul>
Javascript代码部份
<script language="javascript">
// JavaScript Document
function extractNodes(pNode){
if(pNode.nodeType == 3)return null;
var node,nodes = new Array();
for(var i=0;node= pNode.childNodes[i];i++){
if(node.nodeType == 1)nodes.push(node);
}
return nodes;
}
var objj=document.getElementById("rolltxt");
for(i=0;i<4;i++){
objj.appendChild(extractNodes(objj)[i].cloneNode(true));
}
settime=0;
var t=setInterval(rolltxt,10); //行动时间
function rolltxt(){
if(objj.scrollTop % (objj.clientHeight+0) ==0){ // -0 高度
settime+=1;
if(settime==300){ //停留时间
objj.scrollTop+=1;
settime=0;
}
}else{
objj.scrollTop+=1;
if(objj.scrollTop==(objj.scrollHeight-objj.clientHeight)){
objj.scrollTop=0;
}
}
}
objj.onmouseover=function(){clearInterval(t)}
objj.onmouseout=function(){t=setInterval(rolltxt,10)} // 鼠标移动后行动时间
</script>
// JavaScript Document
function extractNodes(pNode){
if(pNode.nodeType == 3)return null;
var node,nodes = new Array();
for(var i=0;node= pNode.childNodes[i];i++){
if(node.nodeType == 1)nodes.push(node);
}
return nodes;
}
var objj=document.getElementById("rolltxt");
for(i=0;i<4;i++){
objj.appendChild(extractNodes(objj)[i].cloneNode(true));
}
settime=0;
var t=setInterval(rolltxt,10); //行动时间
function rolltxt(){
if(objj.scrollTop % (objj.clientHeight+0) ==0){ // -0 高度
settime+=1;
if(settime==300){ //停留时间
objj.scrollTop+=1;
settime=0;
}
}else{
objj.scrollTop+=1;
if(objj.scrollTop==(objj.scrollHeight-objj.clientHeight)){
objj.scrollTop=0;
}
}
}
objj.onmouseover=function(){clearInterval(t)}
objj.onmouseout=function(){t=setInterval(rolltxt,10)} // 鼠标移动后行动时间
</script>