特效介绍
jQuery相册插件
使用方法
1、在head引入相关的js文件和css文件,如下:
<link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="http://www.5imoban.net/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="http://www.5imoban.net" target="_blank"><img src="images/ban1.jpg" width="588" height="425" /><br />jQuery相册插件</a></li> <li><a href="http://www.5imoban.net" target="_blank"><img src="images/ban2.jpg" width="588" height="425" /><br />我爱模板网</a></li> <li><a href="http://www.5imoban.net" target="_blank"><img src="images/ban3.jpg" width="588" height="425" /><br />免费网页模板下载</a></li> <li><a href="http://www.5imoban.net" 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>