特效介绍

jQuery相册插件
使用方法
1、在head引入相关的js文件和css文件,如下:
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js" language="javascript" type="text/javascript"></script>
<!--[if IE 6]>
<script src="js/ie6PNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->
注:下面的代码是解决IE6 PNG透明问题的,不需要的话,可以删除。
<!--[if IE 6]>
<script src="js/ie6PNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->
2、在需要使用该效果的地方加入下面的代码:
<div class="mkeFocus">
<div class="mkeUl">
<ul>
<li><a href="https://5.jimth.com" target="_blank"><img src="images/ban1.jpg" width="588" height="425" /><br />jQuery相册插件</a></li>
<li><a href="https://5.jimth.com" target="_blank"><img src="images/ban2.jpg" width="588" height="425" /><br />我爱模板网</a></li>
<li><a href="https://5.jimth.com" target="_blank"><img src="images/ban3.jpg" width="588" height="425" /><br />免费网页模板下载</a></li>
<li><a href="https://5.jimth.com" target="_blank"><img src="images/ban4.jpg" width="588" height="425" /><br />免费相册插件下载</a></li>
</ul>
<div class="mkeNum"><span class="mke_ns1">1</span><span class="mke_ns2">1</span></div>
<div class="mkeLbtn"></div>
<div class="mkeRbtn"></div>
</div>
</div>
3、在html代码后面加入下面的js代码:
<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,4000);
$(".mkeFocus").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(autoPlay,4000);});
</script>
