複数の画像のループ表示

<div class="jdwxnrleft">
 <STYLE type=text/css>#countdown {
	PADDING-RIGHT: 10px; BACKGROUND-POSITION: 50% bottom; FONT-WEIGHT: bold; FONT-SIZE: 16px; FLOAT: right; BACKGROUND-

IMAGE: url(ayimages/bg_box.gif); MARGIN-BOTTOM: 1px; OVERFLOW: hidden; WIDTH: 340px; COLOR: #c30; LINE-HEIGHT: 69px; PADDING

-TOP: 4px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 69px; TEXT-ALIGN: center
}
#countdown EM {
	FONT-WEIGHT: bold; FONT-SIZE: 26px; MARGIN: 0px 4px; VERTICAL-ALIGN: middle; COLOR: #f00
}
#nav {
	Z-INDEX: 9999; LEFT: 156px; WIDTH: 150px; POSITION: absolute; TOP: -40px
}
#nav UL {
	MARGIN: 0px; WIDTH: 150px
}
#nav LI {
	FLOAT: left; BACKGROUND-IMAGE: none; MARGIN: 0px; WIDTH: 20px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
#nav A {
	BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; DISPLAY: block; FLOAT: left; MARGIN: 0px; BORDER-LEFT: #ccc 

1px solid; WIDTH: 20px; COLOR: black; BORDER-BOTTOM: #ccc 1px solid; TEXT-ALIGN: center
}
#nav A.activeSlide {
	DISPLAY: block; BACKGROUND: #88f; COLOR: #fff
}
#nav A:unknown {
	outline: none
}
#nav IMG {
	DISPLAY: block; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}

</STYLE>
<s:action name="JdjNews_findByPic" namespace="/"></s:action>
<SCRIPT src="<%=basePath%>/js/jquery-1.2.2.pack.js" type=text/javascript></SCRIPT>
<SCRIPT src="<%=basePath%>/js/jquery.cycle.all.js" type=text/javascript></SCRIPT>
<DIV id=imgText style="height:195px;">
<c:forEach items="${pricNews}" var="yxhNewsByDynamicPics" varStatus="status">
<DIV class=imgText title=${status.count}  style="WIDTH: 280px ;">
<a name="5552" title="${yxhNewsByDynamicPics.title }" target="_blank" href='read_newstype.html?stypeId=${yxhNewsByDynamicPics.billid}&typeId=${yxhNewsByDynamicPics.bigtypeid}&newtypeId=${yxhNewsByDynamicPics.newtypeid}'>
<IMG id=img_5552 height="180" alt="${yxhNewsByDynamicPics.title }" src="http://www.qdwsjd.com:7003/${yxhNewsByDynamicPics.picturepath}" width="315" border=0></A> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a name="5552" target="_blank" title="${yxhNewsByDynamicPics.title }" class="ca"  href='read_newstype.html?stypeId=${yxhNewsByDynamicPics.billid}&typeId=${yxhNewsByDynamicPics.bigtypeid}&newtypeId=${yxhNewsByDynamicPics.newtypeid}'>
<font color="#000000"><formt:format til='${yxhNewsByDynamicPics.title}' size='35'/></font>
 </A> </DIV>
</c:forEach>
</DIV>
<DIV>
<DIV id=test style="CLEAR: both; POSITION: relative"></DIV></DIV>
<SCRIPT type=text/javascript>
					$('#imgText').after('<div id="nav">').cycle({ 
    fx:     'fade', 
    speed:   1000, 
    timeout: 5000, 
    next:   '#s4' ,
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<a href="#">' + slide.title + '</a>'; 
    } 
});	
	$('#test').append($('#nav'));			
			
  	</SCRIPT>