左右滚动，IE6 PNG透明的图片相册jQuery插件

左右滚动图片相册jQuery插件，左右按钮很有个性，圆角和投影效果非常好看，下面显示标题，标题左边是当前的index和总张数。自带IE6 PNG透明插件。 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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！