图片滚动和在图片上增加文字显示

JSP：

<div class="leftdiv">

   <div id="slideBox" style="margin-top: 30px;">

    <ul id="show_pic" style="top:0px">

     <c:forEach items="${map.gundong}" var="gundong" varStatus="vrs">
     
      <li style="float: left" ><a target=_self
       href="<%=basePath%>/jsp/index/querynews.jsp?id=${gundong.id}"
       target=""><img src="${gundong.imgs}" width="470"
        height="360px">
        
        </a>
        
        
     

        
        
      </li>
            //图片文字
      <div class="imgtitle" style="top:${(vrs.index+1)*360-30}">${fn:substring(gundong.title,0,30)} <c:if
          test="${fn:length(gundong.title)>30 }">...</c:if>
      
          
          </div>
            
     </c:forEach>
     

    </ul>

    <ul id="iconBall">
     <c:forEach begin="1" end="${fn:length(map.gundong)}" var="i">
      <li style="float: left;margin-left: 2px;"
       <c:if test="${i==1}" > class="active"</c:if>>${i}</li>
     </c:forEach>
    </ul>

    <div id="slideText"></div>
    <ul id="textBall"
     style="position:absolute;left:10px;bottom:3px;list-style: none;">
     <li class="active"><a href="javascript:void(0)"></a></li>
     <li><a href="javascript:void(0)"></a></li>
     <li><a href="javascript:void(0)"></a></li>

    </ul>
   </div>

  </div>

JS:

<script type="text/javascript">
 var glide =new function(){
  function $id(id){return document.getElementById(id);};
  this.layerGlide=function(auto,oEventCont,oTxtCont,oSlider,sSingleSize,second,fSpeed,point){
   var oSubLi = $id(oEventCont).getElementsByTagName('li');
   var oTxtLi = $id(oTxtCont).getElementsByTagName('li');
   var interval,timeout,oslideRange;
   var time=1;
   var speed = fSpeed
   var sum = oSubLi.length;
   var a=0;
   var delay=second * 1000;
   var setValLeft=function(s){
    return function(){
     oslideRange = Math.abs(parseInt($id(oSlider).style[point])); 
     $id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';  
     if(oslideRange==[(sSingleSize * s)]){
      clearInterval(interval);
      a=s;
     }
    }
   };
   var setValRight=function(s){
    return function(){   
     oslideRange = Math.abs(parseInt($id(oSlider).style[point]));       
     $id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
     if(oslideRange==[(sSingleSize * s)]){
      clearInterval(interval);
      a=s;
     }
    }
   }
   
   function autoGlide(){
    for(var c=0;c<sum;c++){oSubLi[c].className='';oTxtLi[c].className='';};
    clearTimeout(interval);
    if(a==(parseInt(sum)-1)){
     for(var c=0;c<sum;c++){oSubLi[c].className='';oTxtLi[c].className='';};
     a=0;
     oSubLi[a].className="active";
     oTxtLi[a].className = "active";
     interval = setInterval(setValLeft(a),time);
     timeout = setTimeout(autoGlide,delay);
    }else{
     a++;
     oSubLi[a].className="active";
     oTxtLi[a].className = "active";
     interval = setInterval(setValRight(a),time); 
     timeout = setTimeout(autoGlide,delay);
    }
   }
  
   if(auto){timeout = setTimeout(autoGlide,delay);};
   for(var i=0;i<sum;i++){ 
    oSubLi[i].onmouseover = (function(i){
     return function(){
      for(var c=0;c<sum;c++){oSubLi[c].className='';oTxtLi[c].className='';};
      clearTimeout(timeout);
      clearInterval(interval);
      oSubLi[i].className = "active";
      oTxtLi[i].className = "active";
      if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
       interval = setInterval(setValLeft(i),time);
       this.οnmοuseοut=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
      }else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
        interval = setInterval(setValRight(i),time);
       this.οnmοuseοut=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
      }
     }
    })(i)   
   }
  }
 }

 //调用语句
 glide.layerGlide(
   true,         //设置是否自动滚动
  'iconBall',   //对应索引按钮
  'textBall',   //标题内容文本
  'show_pic',   //焦点图片容器
   360,          //设置滚动图片位移像素
   3,     //设置滚动时间2秒
   0.1,          //设置过渡滚动速度
     'top'    //设置滚动方向“向左”
 );
 
 
 
 </script>

CSS:

.imgtitle{
 position:absolute;
 
 font-size:12px;
 color:#fff;
 left:10px;
 
}

/*图片轮换*/
#slideBox {
 width: 470px;
 height: 360px;
 overflow: hidden;
 position: relative;
 margin: 0px;
 padding: 0px;
}

#show_pic {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 360px;
 width: 470px;
 position: absolute;
}

#show_pic li {
 float: left;
 margin: 0;
 padding: 0;
 height: 360px;
 position:relative;
}

#show_pic li img {
 display: block;
}

#iconBall {
 position: absolute;
 bottom: 0;
 right: 0;
}

#iconBall li {
 float: left;
 color: #7a7a7a;
 width: 32px;
 height: 28px;
 line-height: 28px;
 cursor: pointer;
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 padding-top: 4px;
}

#iconBall li.active {
 background: url(images/iconbg.png) no-repeat;
 color: #fff;
}

#textBall {
 position: absolute;
 left: 10px;
 bottom: 0px;
 margin: 0px;
}

#textBall li {
 float: left;
 cursor: pointer;
 display: none;
 color: #fff;
 font-size: 14px;
}

#textBall li.active {
 display: block;
}

#textBall li a {
 text-decoration: none;
 color: #fff;
}
.imgtitle{
 position:absolute;
 
 font-size:12px;
 color:#fff;
 left:10px;
 
}
.textspan{
 position:fixed;
 
 font-size:12px;
 color:#333;
 left:10px;

}