Result: code: <%@ include file="/common/taglibs.jsp"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <html> <head> <mce:script type="text/javascript"><!-- var imgIndx = 1; var imgCounts = ${fn:length(newsList)} ;//图片总数 var imgStr = ''; $(document).ready(function(){ <c:forEach items='${newsList}' var='s' varStatus='stat'> <c:if test='${stat.index==0}'> imgStr += '<img width="150px;" height="120px;" style="display:block;" mce_style="display:block;" id="img${stat.index+1}" src="<c:url value=" mce_src="<c:url value="/student/newsNotice/showPic.html">' +'<c:param name="news.id" value="${s.id}"/> </c:url> " alt="Logo" />'; </c:if> imgStr += '<img width="150px;" height="120px;" style="display:none;" mce_style="display:none;" id="img${stat.index+1}" src="<c:url value=" mce_src="<c:url value="/student/newsNotice/showPic.html">' +'<c:param name="news.id" value="${s.id}"/> </c:url> " alt="Logo" />'; </c:forEach> $('#imgs').html(imgStr); window.setInterval("incIndx('"+imgIndx+"')",3000); }); function incIndx(){ if(imgIndx<imgCounts){ imgIndx++; changeImg(imgIndx); }else{ imgIndx = 1; changeImg(imgIndx); } } function changeImg(index){ imgIndx = index; for(var i=1;i<=imgCounts;i++){ //未选中样式 $('#imgIndx'+index).addClass(''); $('#title'+index).addClass(''); if(index!=i){ $('#img'+i).hide(); } } //为下方的索引数字和右侧的title添加样式,选中样式 $('#imgIndx'+index).addClass(''); $('#title'+index).addClass(''); $('#img'+index).show(); } function viewMore(){ document.forms[0].action="/eitp/student/newsNotice/news_indx.html?viewMore=viewMore"; document.forms[0].submit(); } function viewNews(id){ document.forms[0].action="/eitp/student/newsNotice/news_view.html?newsId="+id; document.forms[0].submit(); } // --></mce:script> </head> <body> <div class="blockTitle">News</div> <div style="width: 180px; height: 140px; float: left; margin-left: 10px; border: none; background: none;" class="blockStyle1"> <!-- 用js构建 --> <div id="imgs"></div> <div align="right" style="margin-bottom: 10px;" mce_style="margin-bottom: 10px;"><c:forEach items='${newsList}' varStatus="status" var="n"> <a href="javascript:changeImg(${status.index+1});" mce_href="javascript:changeImg(${status.index+1});" ><font id="imgIndx${status.index+1}">${status.index+1}</font></a> </c:forEach></div> </div> <div style="width: 220px; height: 140px; float: left; margin-left: 10px; border: none; background: none;" class="blockStyle1"> <c:forEach items='${newsList}' var="s" varStatus="status"> <div ><a href="javascript:viewNews(${s.id});" mce_href="javascript:viewNews(${s.id});"><font id="title${status.index+1}">${status.index+1}.${s.title}</font></a> <c:if test="${s.isHot eq true}"> <FONT style="FONT-FAMILY: Verdana; FONT-SIZE: 9px; FONT-WEIGHT: normal" color=red>Hot!</FONT> </c:if> <c:if test="${s.isNew eq true}"> <FONT style="FONT-FAMILY: Verdana; FONT-SIZE: 9px; FONT-WEIGHT: normal" color=red>New!</FONT> </c:if> <br /> </div> </c:forEach> <div align="right" style="margin-bottom: 10px;" mce_style="margin-bottom: 10px;"><a href="javascript:viewMore();" mce_href="javascript:viewMore();" >MORE</a></div> </div> </body> </html>