一个控制器两个轮播

前几天写了一个轮播,在一个控制器里面有两个轮播,刚开始写的时候思路全是错的,发现睡了一晚上灵感就来了

思路:首先一个控制器要有上下轮播和左右轮播

　　上下轮播几乎我们自己都会写,而且网上插件也可多什么样的效果我们都可以写

　　左右轮播如上下轮播一样,例子啊,效果啊五花八门.

　　但是两个轮播合在一起怎么写呢

　　两个箭头控制两个轮播器

　　废话不多说上代码,木有什么是代码解决不了的问题

html代码,两个ul一个左右轮播一个上下轮播

<div class="container">
            <div class="content">
                <div class="btn">
                    <a href="#" class="btnleft"></a>
                    <a href="#" class="btnright"></a>
                </div>
                <ul class="cente">
                    <li style="opacity:1;"><img src="img/317b62af7a20be63dee60bde1b487f983c11f6cb.jpg" alt=""></li>
                    <li><img src="img/3ea892333cc66573a544ad620c1ad6cefbb2b0b1.jpg" alt=""></li>
                    <li><img src="img/4e621babe65f17f2897b5ec782a8274396189243.jpg" alt=""></li>
                    <li><img src="img/a6dae7c99313ec1fbf368a8c486df37988120a94.jpg" alt=""></li>
                    <li><img src="img/cfd9a70f6537c1dd50c9144623f9fb315d0c8aab.jpg" alt=""></li>
                </ul>
                <div class="lun">
                    <ul class="cent">
                        <li><img src="img/317b62af7a20be63dee60bde1b487f983c11f6cb.jpg" alt=""></li>
                        <li><img src="img/3ea892333cc66573a544ad620c1ad6cefbb2b0b1.jpg" alt=""></li>
                        <li><img src="img/4e621babe65f17f2897b5ec782a8274396189243.jpg" alt=""></li>
                        <li><img src="img/a6dae7c99313ec1fbf368a8c486df37988120a94.jpg" alt=""></li>
                        <li><img src="img/cfd9a70f6537c1dd50c9144623f9fb315d0c8aab.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>

css样式

.container{
    min-width:1024px;
    min-height: 300px;
    margin:0 auto;
    
}
.btn{
    min-width:1010px;
    height:100px;
    position: absolute;
    top: 10%;
}
.content{
    max-height:300px;
    margin:0px auto;
    position:relative;
    border:1px solid #CCC;
    overflow: hidden;
    max-width:1000px;
}
.btn a{
    display:block;
    width:50px;
    height:100px;
    position:absolute;
    top:72%;
    margin-top:-50px;
    z-index:25;
}
.btnleft{
    opacity:0.5;
    left:0px;
    background:url("../images/sprite.png") no-repeat;
}
.btnright{
    opacity:0.5;
    right:0px;
    background:url("../images/sprite.png") no-repeat -60px 0px;
}
.cente{float:left;}
.cent{float:right;margin-top:0;overflow: hidden;transition: all in 0.5s;}
.content .cente li{
    width:400px;
    min-height:300px;
    opacity: 0;
    position:absolute;
}
.lun{min-height:300px;overflow: hidden;}
.content .cente li img{width:4500px;min-height:300px;}
.content .cent li img{width:100%;min-height:150px;display: block;}
.content .cente li{
    width: 70%;
}
.content .cent{
    width: 30%;
    margin:0;
}
.content .cent li{
    width: 100%;
}
*{
    margin:0px;
    padding:0px;
    list-style:none;
    border:0;
    outline:none;
    /*横向不出现滚动条*/
    overflow-x:none;    
}
body{
    line-height:1;
    font-size:88%;
}
h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}
a{
    color:#404040;
    text-decoration:none;
}

js代码

$(function(){
    var m=0;
    var time=null;
    //时间
    function move_img(){
        time=setInterval(function(){
            $(".cente").find("li").eq(m).css("opacity","0");
            m++;
            $(".cent").animate({marginTop:"-150px"},function(){
                 $(".cent").css({marginTop:"0px"});
                 $(".cent li:first").remove().clone(true).appendTo(".cent");    
                   })
            if(m>4){
                m=0;
            }
            $(".cente").find("li").eq(m).css("opacity","1");
        },2000);
    }
    move_img();
    //左边点击
    $(".btnleft").click(function(){
        console.log(m)
        $(".cente").find("li").eq(m).css("opacity","0");
        m--;
        // n=-($(".cent").find("li").eq(m).find("img").height())*m;
        if(m<0){
            m=4;

        }    $(".cent").animate({marginTop:"0px"},function(){
             $(".cent").css({marginTop:"-150px"});
             $(".cent li:last").remove().clone(true).prependTo(".cent");
        })    
        $(".cente").find("li").eq(m).css("opacity","1");
    });    
    //右边点击
    $(".btnright").click(function(){
        console.log(m)
        $(".cente").find("li").eq(m).css("opacity","0");
        m++;
        if(m>4){
            m=0;
        }    $(".cent").animate({marginTop:"-150px"},function(){
             $(".cent").css({marginTop:"0px"});
             $(".cent li:first").remove().clone(true).appendTo(".cent");
        })    
        $(".cente").find("li").eq(m).css("opacity","1");
    });
    $(".content").hover(function(){
        clearInterval(time);
    },function(){
        move_img();
    });
});