【求助】JS倒计时

一共8个图片循环滚动，在滚动的图片下方使用js实现倒计时，在正常的第一轮滚动中、倒计时都是正常的；但是在第二轮开始的时候，倒计时信息就不见了，但是继续滚动几个后，倒计时又重新出现？求帮助啊!!谢谢源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page import="cn.hao24.front.group.*" %>
<%@ page import="cn.hao24.util.*" %>
<%@ page import="com.pionsoft.df.log.*"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.text.*"%>
<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">
<!--
.rollBox{width:920px;overflow:hidden;margin:0 auto; height:280px;border:#ebebeb 1px solid; background:#fbfbfb;}
.rollBox_left{width:161px;overflow:hidden;float:left; height:280px;  background:no-repeat; }
.rollBox_right1{width:757px;overflow:hidden;float:left; height:280px;}
.rollBox_right{width:1424px;float:left; height:280px;margin-top:10px;}
.rollBox_right ul { width:178px; height:264px; background:#fbfbfb;float:left; list-style:none;margin:0;padding:0;}
.rollBox_right ul li.img{width:178px; height:181px; float:left; list-style:none; text-align:center; } 
.rollBox_right ul li.title{width:178px; float:left; list-style:none; text-align:center; color:#000000; font-size:12px; font-family:"微软雅黑"; width:169px;line-height:20px; height:20px;}
.rollBox_right ul li.price{width:178px;  color:#dcd4d4; float:left;list-style:none; text-align:center; font-size:12px; font-family:"微软雅黑";width:169px; line-height:20px; height:20px;}
.rollBox_right ul li.time{ width:178px;  height:100%; float:left; list-style:none;width:169px;line-height:20px; height:20px;text-indent:10px;}
.rollBox_right ul li.time1{float:left; list-style:none;width:179px; text-align:center; line-height:28px; height:28px; font-size:12px; text-indent:20px;font-family:"微软雅黑";}
.price2{ color:#cc0000; font-weight:bold; font-size:14px;}
.rollBox .Cont{width:711px;overflow:hidden; float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;}
*+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:30px;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
-->
 </style> 
 <script language="javascript">
function grouponLeftTime(obj2, difTime, refun){
var _this = this;
_this.obj2 = obj2;
_this._difTime = difTime;
_this.refun = refun;
_this.Interval = window.setInterval(function(){
_this._difTime -= 1000;
_this.startTime(_this._difTime);
},1000);
}grouponLeftTime.prototype = {
startTime:function(dift){
var dif = dift;
if (dif < 1){
window.clearInterval(this.Interval);
this.refun();
return;
}
var d = parseInt(dif/86400000);
dif = dif - d*86400000;
var h = parseInt(dif/3600000);
if(h < 10){h = "0"+h}
dif = dif - h*3600000;
var m = parseInt(dif/60000);
if(m < 10){m = "0"+m}
dif = dif - m*60000;
var s = parseInt(dif/1000);
if(s < 10){s = "0"+s}
if(d > 0){
this.obj2.innerHTML = d+"天"+h+"小时"+m+"分"+s+"秒";
}else{
this.obj2.innerHTML = "0天"+h+"小时"+m+"分"+s+"秒";
} }
};
</script>
</head>
<%
TwgroupmMgr twgroupmMgr = new TwgroupmMgr();
Twgroupm[] twgroupmList = twgroupmMgr.queryAllGroup();
int listMLen = twgroupmList.length;
Log.info.println("log --------------------> groupon listMLen = "+ listMLen);
int k = 0;
%>
<div class="rollBox">
<div class="rollBox_left"><a href="http://www.hao24.cn/group/groupon.jsp" target="_blank"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/left.jpg" border="0" /></a></div>
<div class="rollBox_right1">
<%
if(listMLen >= 8){
%>
<div style="float:left; width:23px; height:43px; margin-top:80px;"><img onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"  class="img1"  src="http://www.hao24.cn/images_site/event/2012/08/tuangou/prev.jpg"  width="23" height="43" /></div>
     <div class="Cont" id="ISL_Cont">
      <div class="ScrCont">
       <div id="List1" class="rollBox_right">
<%
long nowtime = DateUtil.getSysdate().getTime();
Log.info.println("log----------------> nowtime = "+nowtime);
for(int i = 0; i < listMLen ; i++){
String groupNo  = twgroupmList[i].getGroup_no();
String itemCode = twgroupmList[i].getItem_code();
String itemName = twgroupmList[i].getItem_name();
int haoPrice    = twgroupmList[i].getHao_price();
int maxQty      = twgroupmList[i].getMax_qty();
String desc     = twgroupmList[i].getDescription();
Timestamp sDate = twgroupmList[i].getS_date();
Timestamp eDate = twgroupmList[i].getE_date();

long endTime    = eDate.getTime();
long difTime    = endTime - nowtime;
Log.info.println("log ----------------> difTime = "+difTime);

int regCnt =  twgroupmList[i].getReg_cnt();
int orderCnt = twgroupmList[i].getOrd_cnt();
int groupCnt = regCnt+orderCnt;
Log.info.println("log ----------------> itemCode = "+itemCode
+" groupNo = "+groupNo+"， regCnt = "+regCnt+"， orderCnt = "+orderCnt+"， groupCnt = "+groupCnt);

Twgroupd [] twgroupdList = twgroupmMgr.getGroupDList(groupNo);
int listDLen = twgroupdList.length;
if(listDLen != 3){
Log.info.println("log ----------------> 出现异常：GroupNo为"+groupNo
+"的商品只出现"+listDLen+"种价格区间，暂不能正常展示该商品，请检查数据表TWGROUPD。");
continue;
}
int priceS = twgroupdList[2].getPrice();
if(orderCnt < maxQty){
k = i+1;
%>
<ul>
<li class="img"><a href="/section/itemDtl.jsp?good_id=<%=itemCode%>" target="_blank"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/tg_127434.jpg" border="0" width="167" height="181" /></a></li>
<li class="title"><%=i+1%></li>
<li class="price"><s>￥<%=CJUtil.formatNum(haoPrice)%></s>  <span class="price2">￥<%=CJUtil.formatNum(priceS)%></span></li>
<li class="time"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/time.jpg" /></li>
<li class="time1" id="grouponLeftTime_<%=itemCode%>"></li>
<script language="javascript">
new grouponLeftTime(document.getElementById("grouponLeftTime_<%=itemCode%>"),<%=difTime%>,function(){});
</script>
</ul>
<%
}
}%>
       </div>
       <div id="List2" class="rollBox_right"></div>
      </div>
     </div>
<div style="float:right; width:23px; height:43px; margin-top:80px;"><img  onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"  class="img2"  src="http://www.hao24.cn/images_site/event/2012/08/tuangou/next.jpg"  width="23" height="43" /></div>
<%}%>     
</div>
</div> <script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 10; //速度(毫秒)
var Space = 10; //每次移动(px)
var PageWidth = 178; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
}
function ISL_GoUp(){ //上翻开始
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
y++;
}
function ISL_ScrUp(){ //上翻动作
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
clearInterval(MoveTimeObj);
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
x++;
}
function ISL_ScrDown(){ //下翻动作
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft =GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
var num;
if(Comp == 0){MoveLock = false;return;}
if(Comp < 0){ //上翻
if(Comp < -Space){
   Comp += Space;
   num = Space;
}else{
   num = -Comp;
   Comp = 0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',Speed);
}else{ //下翻
if(Comp > Space){
   Comp -= Space;
   num = Space;
}else{
   num = Comp;
   Comp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()',Speed);
}
}
//--><!]]>
</script>

解决方案 »

  1.   

    java代码怎么也写进jsp页面中，混乱
      

  2.   

    不见了？把倒计时的 容器，离你图片滚动远些。在测试看。
    是否滚动图片挡住了 倒计时的 容器。这些js 效果，先写静态html 测试。（最后分开测试）。
    没问题了，在集成到项目
      

  3.   

    好吧、我错了、上一个直接可以运行的本地程序，高手们直接复制就可以运行、帮我看看吧、谢谢了
    <html> 
    <head> 
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> 
    <meta name="ProgId" content="FrontPage.Editor.Document"> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>JS倒计时问题啊</title> 
    </head> 
    <body> 
    <style type="text/css">.rollBox{width:920px;overflow:hidden;margin:0 auto; height:280px;border:#ebebeb 1px solid; background:#fbfbfb;}
    .rollBox_left{width:161px;float:left; height:280px;  background:no-repeat; }
    .rollBox_right1{width:757px;float:left; height:280px;}
    .rollBox_right{width:711px;overflow:hidden;float:left; height:280px;}
    .rollBox_right ul { width:169px; height:264px; background:#fbfbfb;float:left; list-style:none; margin-top:8px; padding:4px;}
    .rollBox_right ul li.img{width:167px; height:181px; float:left; list-style:none; text-align:right;} 
    .rollBox_right ul li.title{width:167px; float:left; list-style:none; text-align:center; color:#000000; font-size:12px; font-family:"微软雅黑"; width:169px;line-height:20px; height:20px;}
    .rollBox_right ul li.price{ color:#dcd4d4; float:left;list-style:none; text-align:center; font-size:12px; font-family:"微软雅黑";width:169px; line-height:20px; height:20px;}
    .rollBox_right ul li.time{ width:100%; height:100%; float:left; list-style:none;width:169px;line-height:20px; height:20px;text-indent:10px;}
    .rollBox_right ul li.time1{float:left; list-style:none;width:169px; line-height:28px; height:28px; font-size:12px; text-indent:20px;font-family:"微软雅黑";}
    .price2{ color:#cc0000; font-weight:bold; font-size:14px;}
    .rollBox .Cont{width:711px;overflow:hidden; float:left;}
    .rollBox .ScrCont{width:10000000px;}
    .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;}
    *+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:30px;}
    .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
    .rollBox .Cont .pic p{line-height:26px;color:#505050;}
    .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
    .rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
    .rollBox #List1,.rollBox #List2{float:left;} </style>
      <script language="javascript">
    function grouponLeftTime(obj2, difTime, refun){
    var _this = this;
    _this.obj2 = obj2;
    _this._difTime = difTime;
    _this.refun = refun;
    _this.Interval = window.setInterval(function(){
    _this._difTime -= 1000;
    _this.startTime(_this._difTime);
    },1000);
    }grouponLeftTime.prototype = {
    startTime:function(dift){
    var dif = dift;
    if (dif < 1){
    window.clearInterval(this.Interval);
    this.refun();
    return;
    }
    var d = parseInt(dif/86400000);
    dif = dif - d*86400000;
    var h = parseInt(dif/3600000);
    if(h < 10){h = "0"+h}
    dif = dif - h*3600000;
    var m = parseInt(dif/60000);
    if(m < 10){m = "0"+m}
    dif = dif - m*60000;
    var s = parseInt(dif/1000);
    if(s < 10){s = "0"+s}
    if(d > 0){
    this.obj2.innerHTML = d+"天"+h+"小时"+m+"分"+s+"秒";
    }else{
    this.obj2.innerHTML = "0天"+h+"小时"+m+"分"+s+"秒";
    } }
    };
    </script>
    </HEAD>
    <div class="rollBox">
    <div class="rollBox_left"><a href="http://www.hao24.cn/group/groupon.jsp" target="_blank"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/left.jpg" border="0" /></a></div>
    <div class="rollBox_right1">
    <div style="float:left; width:23px; height:43px; margin-top:80px;"><img onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"  class="img1"  src="http://www.hao24.cn/images_site/event/2012/08/tuangou/prev.jpg"  width="23" height="43" /></div>
         <div class="Cont" id="ISL_Cont">
          <div class="ScrCont">
           <div id="List1" class="rollBox_right">
            <ul>
    <li class="img"><a href="/section/itemDtl.jsp?good_id=127434" target="_blank"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/tg_127434.jpg" border="0" width="167" height="181" /></a></li>
    <li class="title">新光北欧女神套组(网型）1</li>
    <li class="price"><s>￥398</s>  <span class="price2">￥268</span></li>
    <li class="time"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/time.jpg" /></li>
    <li class="time1" id="time1"></li>
    <script language="javascript">
    new grouponLeftTime(document.getElementById("time1"),457614000,function(){});
    </script>
    </ul><ul>
    <li class="img"><a href="/section/itemDtl.jsp?good_id=127434" target="_blank"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/tg_127434.jpg" border="0" width="167" height="181" /></a></li>
    <li class="title">新光北欧女神套组(网型）2</li>
    <li class="price"><s>￥398</s>  <span class="price2">￥268</span></li>
    <li class="time"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/time.jpg" /></li>
    <li class="time1" id="time2"></li>
    <script language="javascript">
    new grouponLeftTime(document.getElementById("time2"),7912682000,function(){});
    </script>
    </ul><ul>
    <li class="img"><a href="/section/itemDtl.jsp?good_id=127434" target="_blank"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/tg_127434.jpg" border="0"  width="167" height="181"/></a></li>
    <li class="title">新光北欧女神套组(网型）3</li>
    <li class="price"><s>￥398</s>  <span class="price2">￥268</span></li>
    <li class="time"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/time.jpg" /></li>
    <li class="time1" id="time3"></li>
    <script language="javascript">
    new grouponLeftTime(document.getElementById("time3"),4370282000,function(){});
    </script>
    </ul><ul>
    <li class="img"><a href="/section/itemDtl.jsp?good_id=127434" target="_blank"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/tg_127434.jpg"border="0"  width="167" height="181"/></a></li>
    <li class="title">新光北欧女神套组(网型）4</li>
    <li class="price"><s>￥398</s>  <span class="price2">￥268</span></li>
    <li class="time"><img src="http://www.hao24.cn/images_site/event/2012/08/tuangou/time.jpg" /></li>
    <li class="time1" id="time4"></li>
    <script language="javascript">
    new grouponLeftTime(document.getElementById("time4"),8690282000,function(){});
    </script>
    </ul>
           </div>
           <div id="List2" class="rollBox_right"></div>
          </div>
         </div>
    <div style="float:right; width:23px; height:43px; margin-top:80px;"><img  onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"  class="img2"  src="http://www.hao24.cn/images_site/event/2012/08/tuangou/next.jpg"  width="23" height="43" /></div>
        
    </div>
    </div> <script language="javascript" type="text/javascript">
    <!--//--><![CDATA[//><!--
    //图片滚动列表 mengjia 070816
    var Speed = 10; //速度(毫秒)
    var Space = 10; //每次移动(px)
    var PageWidth = 178; //翻页宽度
    var fill = 0; //整体移位
    var MoveLock = false;
    var MoveTimeObj;
    var Comp = 0;
    var AutoPlayObj = null;
    GetObj("List2").innerHTML = GetObj("List1").innerHTML;
    GetObj('ISL_Cont').scrollLeft = fill;
    GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
    GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
    AutoPlay();
    function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
    function AutoPlay(){ //自动滚动
    clearInterval(AutoPlayObj);
    AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
    }
    function ISL_GoUp(){ //上翻开始
    if(MoveLock) return;
    clearInterval(AutoPlayObj);
    MoveLock = true;
    MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
    }
    function ISL_StopUp(){ //上翻停止
    clearInterval(MoveTimeObj);
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
    Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
    CompScr();
    }else{
    MoveLock = false;
    }
    AutoPlay();
    }
    function ISL_ScrUp(){ //上翻动作
    if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
    GetObj('ISL_Cont').scrollLeft -= Space ;
    }
    function ISL_GoDown(){ //下翻
    clearInterval(MoveTimeObj);
    if(MoveLock) return;
    clearInterval(AutoPlayObj);
    MoveLock = true;
    ISL_ScrDown();
    MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
    }
    function ISL_StopDown(){ //下翻停止
    clearInterval(MoveTimeObj);
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
    Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
    CompScr();
    }else{
    MoveLock = false;
    }
    AutoPlay();
    }
    function ISL_ScrDown(){ //下翻动作
    if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft =GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
    GetObj('ISL_Cont').scrollLeft += Space ;
    }
    function CompScr(){
    var num;
    if(Comp == 0){MoveLock = false;return;}
    if(Comp < 0){ //上翻
    if(Comp < -Space){
       Comp += Space;
       num = Space;
    }else{
       num = -Comp;
       Comp = 0;
    }
    GetObj('ISL_Cont').scrollLeft -= num;
    setTimeout('CompScr()',Speed);
    }else{ //下翻
    if(Comp > Space){
       Comp -= Space;
       num = Space;
    }else{
       num = Comp;
       Comp = 0;
    }
    GetObj('ISL_Cont').scrollLeft += num;
    setTimeout('CompScr()',Speed);
    }
    }
    //--><!]]>
    </script>
    </body> 
    </html>