首页 > 特效插件 > 滚动轮播 >  左右滚动,IE6 PNG透明的图片相册jQuery插件正文

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

特效介绍
jQuery相册插件
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>