1、導入jquery。
2、在圖片展示區域寫入：
<div class="mkeFocus" style="text-align:center;">
<div class="mkeUl" >
<ul style="width: 31752px;">
<c:forEach items="${plist }" var="photo">
<li><a><img src="${ctx }${ photo.pflie}" οnerrοr="this.src='${ctx}${tpl}/images/default.jpg'" width="588" height="425"><br>${photo.pname }</a></li>
</c:forEach>
</ul>
<div class="mkeNum"><span class="mke_ns1">1</span><span class="mke_ns2">${plist.size()}</span></div>
<div class="mkeLbtn"></div>
<div class="mkeRbtn"></div>
</div>
</div>
<script language="javascript">
var rnum=$(".mkeUl ul li").size();
var cnum=0;
$(".mke_ns2").html(rnum);
$(".mkeUl ul").width(rnum*588);
$(".mkeRbtn").click(function(){
cnum++;
if(cnum>(rnum-1)){
cnum=0;
}
$(".mkeUl ul").animate({"left":-cnum*588},300);
$(".mke_ns1").html(cnum+1);
});
$(".mkeLbtn").click(function(){
cnum--;
if(cnum<0){
cnum=rnum-1;
}
$(".mkeUl ul").animate({"left":-cnum*588},300);
$(".mke_ns1").html(cnum+1);
});
function autoPlay(){
cnum++;
if(cnum>(rnum-1)){
cnum=0;
}
$(".mkeUl ul").animate({"left":-cnum*588},300);
$(".mke_ns1").html(cnum+1);
}
var Timer=setInterval(autoPlay,8000);
$(".mkeFocus").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(autoPlay,8000);});
</script>
<style>
@charset "utf-8";
.con_link_content{text-indent:0;}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋體"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px
1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微軟雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{background:#FFF; padding:50px;}
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微軟雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
.mkeFocus { height: 494px; width: 603px; border: 1px solid #C9CACB; border-radius:8px; padding-top: 7px; margin:0 auto;margin-left:150px;}
.mkeUl { margin: 0px auto; height: 486px; width: 588px; overflow: hidden; position: relative; }
.mkeUl ul { position: absolute; left: 0px; top: 0px; height: 486px; }
.mkeUl ul li { float: left; text-align: center; font: 16px "微軟雅黑"; }
.mkeUl ul li img { margin-bottom: 18px; }
.mkeNum { background: #FFF url(${ctx}${tpl}/images/banNum.jpg); height: 35px; width: 37px; position: absolute; z-index: 1; left: 13px; bottom: 4px; font: 14px Arial; }
.mke_ns1 { line-height: 16px; text-align: center; height: 16px; width: 16px; position: absolute; left: 0px; top: 0px; }
.mke_ns2 { line-height: 16px; color: #9FA0A0; text-align: center; display: block; height: 16px; width: 16px; position: absolute; right: 0px; bottom: 0px; }
.mkeLbtn { background: url(${ctx}${tpl}/images/kelBtn.png) no-repeat; height: 98px; width: 36px; position: absolute; left: 6px; top: 165px; cursor: pointer; z-index: 10; }
.mkeRbtn { position: absolute; top: 165px; right: 6px; background: url(${ctx}${tpl}/images/kerBtn.png) no-repeat; height: 98px; width: 36px; cursor: pointer; z-index: 10; }
</style>