回到顶部
我的头像

RedSpite

抽牌效果之banner轮播

banner轮播方式真的很多,这也算一种特别的轮播方式了吧~

css3结合jq,炫的都是css3的功劳。

  • banner1
  • banner2
  • banner3
    Html:
                        
    • banner1
    • banner2
    • banner3
      Css:
                          #fp-box,.fp-img-box li, .fp-img-box{
                              width:100%;
                              padding-bottom: 30%;
                              height: 0;
                          }
                          .fp-box{
                              position: relative;
                              overflow: hidden;
                          }
                          .fp-img-box{
                              margin-bottom: 0;
                              -webkit-perspective: 800px;
                              perspective: 800px;
                              -webkit-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                          }
                          .fp-img-box li{
                              position: absolute;
                              top:0;
                              left: 0;
                              visibility: hidden;
                          }
                          .fp-img-box li img{
                              width: 100%;
                          }
                          .fp-num-box{
                              position: absolute;
                              bottom: 5px;
                              width: 100%;
                              text-align: center;
                              margin-bottom: 0;
                          }
                          .fp-num-box li{
                              width: 12px;
                              height: 12px;
                              background: #fff;
                              border: 2px solid #75aaa2;
                              display: inline-block;
                              border-radius: 50%;
                              margin: 0 2px;
                              cursor: pointer;
                          }
                          .fp-num-box li.active{
                              background: #75aaa2;
                              border: 2px solid #fff;
                          }
                          .fp-img-box li.show{
                              visibility: visible;
                              z-index: 10;
                          }
                          .fp-img-box li.show.right{
                              -webkit-animation: showright 1s ease;
                              animation: showright 1s ease;
                          }
                          .fp-img-box li.hides.right{
                              -webkit-animation: hideright 1s ease;
                              animation: hideright 1s ease;
                          }
                          .fp-img-box li.show.left{
                              -webkit-animation: showleft 1s ease;
                              animation: showleft 1s ease;
                          }
                          .fp-img-box li.hides.left{
                              -webkit-animation: hideleft 1s ease;
                              animation: hideleft 1s ease;
                          }
                          @-webkit-keyframes showright {
                              0%{ -webkit-transform: translateZ(-200px)}
                              50%{ -webkit-transform: translate(40%,0) scale(0.8) rotateY(-30deg)}
                              100%{ -webkit-transform: translateZ(0px)}
                          }
                          @keyframes showright {
                              0%{ transform: translateZ(-200px)}
                              50%{ transform: translate(40%,0) scale(0.8) rotateY(-30deg)}
                              100%{ transform: translateZ(0px)}
                          }
                          @-webkit-keyframes hideright {
                              0%{ -webkit-transform: translateZ(0px);visibility: visible;}
                              50%{ -webkit-transform: translate(-40%, 0) scale(0.8) rotateY(30deg)}
                              100%{ -webkit-transform: translateZ(-200px);visibility: hidden;}
                          }
                          @keyframes hideright {
                              0%{ transform: translateZ(0px);visibility: visible;}
                              50%{ transform: translate(-40% ,0) scale(0.8) rotateY(30deg)}
                              100%{ transform: translateZ(-200px);visibility: hidden}
                          }
                          @-webkit-keyframes showleft {
                              0%{ -webkit-transform: translateZ(-200px)}
                              50%{ -webkit-transform: translate(40%, 0) scale(0.8) rotateY(-30deg)}
                              100%{ -webkit-transform: translateZ(0px)}
                          }
                          @keyframes showleft {
                              0%{ transform: translateZ(-200px)}
                              50%{ transform: translate(40% ,0) scale(0.8) rotateY(-30deg)}
                              100%{ transform: translateZ(0px)}
                          }
                          @-webkit-keyframes hideleft {
                              0%{ -webkit-transform: translateZ(0px);visibility: visible;}
                              50%{ -webkit-transform: translate(-40%, 0) scale(0.8) rotateY(30deg)}
                              100%{ -webkit-transform: translateZ(-200px);visibility: hidden;}
                          }
                          @keyframes hideleft  {
                              0%{ transform: translateZ(0px);visibility: visible;}
                              50%{ transform: translate(-40% ,0) scale(0.8) rotateY(30deg)}
                              100%{ transform: translateZ(-200px);visibility: hidden}
                          }
      
                      
      JS:
                          $(function () {
                              var img = $(".fp-img-box li");
                              var size = img.size();
      
                              //生成小圆点
                              var _LiHtml='';
                              for(var i=0;i< size;i++){
                                  _LiHtml+=' 
    • '; } $(".fp-num-box").append(_LiHtml); //初始状态 var num = $(".fp-num-box li"); img.eq(0).addClass("show"); num.eq(0).addClass("active").siblings().removeClass("active"); var t = setInterval( move,3000); //主函数 function move(){ var i = $(".fp-num-box li.active").index(); i++; // console.log(i); if(i>=size){ i=0; }else if(i<=0){ i=size; } img.eq(i).attr("class","show right"); img.eq(i-1).attr("class","hides right"); num.eq(i).addClass("active").siblings().removeClass("active"); } //圆点点击 num.click(function () { clearInterval(t); var index = $(".fp-num-box li.active").index(); var i = $(this).index(); //点击已激活左侧 if(index>i){ img.eq(i).attr("class","show left"); img.eq(index).attr("class","hides left"); //点击已激活右侧 }else if(index < i){ img.eq(i).attr("class","show right"); img.eq(index).attr("class","hides right"); }else{ } num.eq(i).addClass("active").siblings().removeClass("active"); t = setInterval(move,3000); }); });

      2016.10.11

      © RedSpite | 蜀ICP备16004270号