前台照片展示的js实现

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}" onerror="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>