一个控制器两个轮播

Posted 2020-09-25 蔡秀芳

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

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

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

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

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

　　两个箭头控制两个轮播器

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

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

 1 <div class="container">
 2             <div class="content">
 3                 <div class="btn">
 4                     <a href="#" class="btnleft"></a>
 5                     <a href="#" class="btnright"></a>
 6                 </div>
 7                 <ul class="cente">
 8                     <li style="opacity:1;"><img src="img/317b62af7a20be63dee60bde1b487f983c11f6cb.jpg" alt=""></li>
 9                     <li><img src="img/3ea892333cc66573a544ad620c1ad6cefbb2b0b1.jpg" alt=""></li>
10                     <li><img src="img/4e621babe65f17f2897b5ec782a8274396189243.jpg" alt=""></li>
11                     <li><img src="img/a6dae7c99313ec1fbf368a8c486df37988120a94.jpg" alt=""></li>
12                     <li><img src="img/cfd9a70f6537c1dd50c9144623f9fb315d0c8aab.jpg" alt=""></li>
13                 </ul>
14                 <div class="lun">
15                     <ul class="cent">
16                         <li><img src="img/317b62af7a20be63dee60bde1b487f983c11f6cb.jpg" alt=""></li>
17                         <li><img src="img/3ea892333cc66573a544ad620c1ad6cefbb2b0b1.jpg" alt=""></li>
18                         <li><img src="img/4e621babe65f17f2897b5ec782a8274396189243.jpg" alt=""></li>
19                         <li><img src="img/a6dae7c99313ec1fbf368a8c486df37988120a94.jpg" alt=""></li>
20                         <li><img src="img/cfd9a70f6537c1dd50c9144623f9fb315d0c8aab.jpg" alt=""></li>
21                     </ul>
22                 </div>
23             </div>
24         </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代码

 1 $(function(){
 2     var m=0;
 3     var time=null;
 4     //时间
 5     function move_img(){
 6         time=setInterval(function(){
 7             $(".cente").find("li").eq(m).css("opacity","0");
 8             m++;
 9             $(".cent").animate({marginTop:"-150px"},function(){
10                  $(".cent").css({marginTop:"0px"});
11                  $(".cent li:first").remove().clone(true).appendTo(".cent");    
12                    })
13             if(m>4){
14                 m=0;
15             }
16             $(".cente").find("li").eq(m).css("opacity","1");
17         },2000);
18     }
19     move_img();
20     //左边点击
21     $(".btnleft").click(function(){
22         console.log(m)
23         $(".cente").find("li").eq(m).css("opacity","0");
24         m--;
25         // n=-($(".cent").find("li").eq(m).find("img").height())*m;
26         if(m<0){
27             m=4;
28 
29         }    $(".cent").animate({marginTop:"0px"},function(){
30              $(".cent").css({marginTop:"-150px"});
31              $(".cent li:last").remove().clone(true).prependTo(".cent");
32         })    
33         $(".cente").find("li").eq(m).css("opacity","1");
34     });    
35     //右边点击
36     $(".btnright").click(function(){
37         console.log(m)
38         $(".cente").find("li").eq(m).css("opacity","0");
39         m++;
40         if(m>4){
41             m=0;
42         }    $(".cent").animate({marginTop:"-150px"},function(){
43              $(".cent").css({marginTop:"0px"});
44              $(".cent li:first").remove().clone(true).appendTo(".cent");
45         })    
46         $(".cente").find("li").eq(m).css("opacity","1");
47     });
48     $(".content").hover(function(){
49         clearInterval(time);
50     },function(){
51         move_img();
52     });
53 });