图片轮询

一、导入包

<link rel="stylesheet" type="text/css"
href="<c:url value='/js/nivo-slider/nivo-slider.css' />" />
<script type="text/javascript"
src="<c:url value='/js/nivo-slider/jquery.nivo.slider.pack.js' />"></script>

二、样式定义

<style>
#slider {
width: 600px;
height: 402px;
margin: 5px auto;
background: url(images/loading.gif) no-repeat 50% 50%;
}

#slider img {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none;
}

.nivo-controlNav {
position: absolute;
left: 300px;
bottom: -42px;
}

.nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(images/bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

.nivo-controlNav a.active {
background-position: 0 -22px;
}

.nivo-directionNav a {
display: block;
width: 60px;
height: 100px;
text-indent: -9999px;
border: 0;
}

a.nivo-nextNav {
right: -15px;
background: url(images/arrow_right.png) no-repeat;
}

a.nivo-prevNav {
left: 0px;
background: url(images/arrow_left.png) no-repeat;
}

.nivo-caption {
text-shadow: none;
font-family: Helvetica, Arial, sans-serif;
}

.nivo-caption a {
color: #efe9d1;
text-decoration: underline;
}
</style>

三、ui

<td rowspan="5" colspan="2" class="tdFlexslider"
style="width: 50%; text-align: center;">
<c:choose>
<c:when test="${dfagFileNum > 0}">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<c:forEach items="${dfagFileList}" var="dfagFile">
<c:if test="${dfagFile.useType == 'companyPicFiles'}">
<img
src="<c:url value='/upload/files/${dfagFile.filePath}'/>"
alt="" />
</c:if>
</c:forEach>
</div>
</div>
</c:when>
<c:otherwise>
<img src="<c:url value='/images/model.jpg'/>" alt=""
width="600px" height="400px" />
</c:otherwise>
</c:choose>
</td>