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;
}