天猫首页迷思之－jquery实现左侧广告牌图片轮播

本次要实现的是天猫首页每个楼层左侧的图片轮播效果。见图：

功能点有：点击右箭头向右滑动；点击左箭头向左滑动；什么都不点自动滑动。

1.实现样式。
简单分析一下大概的html结构。一个大的div里面包含两个箭头以及轮播的容器。图片是由三个p标签组成，每个p标签中包含3个图片。
css见github

 <div class="floor-show-middle">
             <a class="floor-show-middle-arrow arrow-left"  title="上一个幻灯片"></a>
             <a  class="floor-show-middle-arrow  arrow-right"   title="下一个幻灯片"></a>
             <div class="brand-slide-content">
                 <div class="brand-slide-bg" is-animating="false">
                     <p class="pt-page page-current">
                         <a href=""><img src="data:images/1-1.jpg"></a>
                         <a href=""><img src="data:images/1-2.jpg"></a>
                         <a href=""><img src="data:images/1-3.jpg"></a>
                     </p>
                     <p class="pt-page">
                         <a href=""><img src="data:images/2-1.jpg"></a>
                         <a href=""><img src="data:images/2-2.jpg"></a>
                         <a href=""><img src="data:images/2-3.jpg"></a>
                     </p>
                     <p class="pt-page">
                         <a href=""><img src="data:images/3-1.jpg"></a>
                         <a href=""><img src="data:images/3-2.jpg"></a>
                         <a href=""><img src="data:images/3-3.jpg"></a>
                     </p>
                 </div>
             </div>
         </div>

得到的效果是：

2. 图片轮播动画效果的实现。

　　为了方便描述，给三个需要展示的p编个号：①②③。

　　轮播的难点1：图片没法成圆圈式排列，怎么才能让处于边界的p①在向右滑动的时候左边有个③在向右滑动，and 怎么让处于边界的p③在向左滑动的时候右边有个①在向右滑动。

　　轮播的难点2：由于无法控制用户点击箭头的速度，如果前一个图片移动没完成就进行下一个图片移动，会造成混乱。解决办法很简单，为每个div增加一个属性is_animating，当动画开始设置为true，监听动画结束事件，结束后设置为false；每次在执行动画之前都需要判断这个变量。

　　如果三个p标签按照从左至右依次不叠加排列①②③，需要做到滑动效果的话②是很好实现，而①在从左至右滑动时因为左边没有元素了，所以无法循环滑动，同理③也是。好了，想办法。

方法一：p标签从左至右排列，头尾添加副本法。为了保证每张图片都有顺滑的从左至右滑动的动画效果，可以在在头部前面加上p③，在尾部加上p①；最后p标签的排列效果就是③①②③①；举个例子：

　　1.将div.brand-slide-bg中的样式设置为position:absolute;这样就可以使用left，right属性来让该div移动；

　　2.当第一个①在可视区域内时，点击左箭头 -> div向左移动1个单位 ->  移动完成后，将div的left的值改为-300px，让第二个③迅速处于可视区域

　　实现方法一：使用jquery中，animate方法移动（未添加动画原子性判断，刚开始写复用性还不太好，可以参考下思想）：

右箭头处理函数animate()

 function autoMove(){
     var p_length=100;//p元素的宽度
     var slide_div=$(".brand-slide-bg");//class为brand-slide-bg的div
     var pic_index=slide_div.attr("index");//当前图片的索引
     var p_quantities=slide_div.children("p").length;
     slide_div.clearQueue();
     if (pic_index==1) {
         pic_index=p_quantities;
         var last_p=slide_div.children("p").last();
         slide_div.css("left","-100px");
         slide_div.children("p").first().before(last_p.clone());

         slide_div.animate({
                 left:0
             },700,
             function(){
                 //回调函数，删除添加的p
                 slide_div.children("p").first().remove();//删除为了滑动而添加的元素
                 var left=getLeft(p_length,pic_index);
                 slide_div.css("left",left);
         });
     }else{
         pic_index--;
         var left=getLeft(p_length,pic_index);//相对于父容器向左移动的值
         slide_div.animate({
             left:left
         },800);
     }
     slide_div.attr("index",pic_index);
     autoTask=setTimeout("autoMove()",2000);
 }

自动轮播处理函数animate()

　　实现方法二：使用css3的属性transition来移动：

　　CSS3特性：transition＋transform

　　以下是一个点击右边箭头的幻灯片向右翻动的代码，通过监听webkitTransitionEnd方法监听transition的结束时间，结束的时候快速将幻灯片的位置换到－100px的初始位置。

 $(".arrow-right").click(function(){
         var slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");//滑动幻灯片的父div
         var index=slide_div.attr("index");//当前图片的索引，默认为1
         index++;
         var position=index*(-100)+"px";
         if(index==2){
             slide_div.css("-webkit-transform-origin","-100px 0 0");
         }
         slide_div.css("-webkit-transition-duration","0.5s");
         slide_div.css("-webkit-transform","translate3d("+position+",0,0)");
         slide_div.attr("index",index);
     });
     /*小的滑动的幻灯片end*/

     $(".brand-slide-bg").bind('webkitTransitionEnd', function(){
         index=$(this).attr("index");//监听动画完成的动作
         if(index==4){
             index=1;
             $(this).css("-webkit-transition-duration","0s");
             $(this).css("-webkit-transform","translate3d(-100px,0,0)");
             $(this).attr("index",index);
         }
     });
  

transition右箭头处理函数

方法二：p标签叠加排列，为每个p添加每个滑动方向的动画事件。

这种方式不需要新增p的副本，只有需要展示的p显示，其余都隐藏。

这次用css3的新特性，@ keyframes来实现。通过 @keyframes 规则，能够创建动画。配合css属性animation来使用。

css样式定义：

由于要支持不同浏览器，@-moz-keyframes在火狐中被解释，@-webkit-keyframes在chrome等webkit为核心的浏览器中被解释。

keyframe中需要定义from和to两个key的值，表示动画开始时元素的样式和动画结束时元素的样式。from，to也可以用百分比来代替，更精确

animate属性定义使用哪个动画、动画时常、动画执行次数。

设计上，为每个p元素在不同场景下划分不同css类，定义不同的动画。

.moveToLeft表示从当前位置向左移动。.moveFromLeft表示从左移动到指定位置。依次类推。

在定义一个类.page_current将该元素不隐藏展示

举个例子：p有①②③三个，默认都是隐藏状态。当前可视的只有②，点击左箭头。给p赋值的场景如下：②新增.moveToLeft，③新增moveFromRight，动画完成后，②去掉.moveToLeft;③去掉moveFroRight，③加上.page_current类

  .moveFromRight{
               animation:moveFromRight 0.5s ease 1;
               -moz-animation:moveFromRight 0.5s ease 1; /* Firefox */
               -webkit-animation:moveFromRight 0.5s ease 1; /* Safari and Chrome */
               -o-animation:moveFromRight 0.5s ease 1; /* Opera */
             }
             .moveToLeft{
               animation:moveToLeft 0.5s ease 1;
               -moz-animation:moveToLeft 0.5s ease 1; /* Firefox */
               -webkit-animation:moveToLeft 0.0.5s ease 1; /* Safari and Chrome */
               -o-animation:moveToLeft 0.5s ease 1; /* Opera */
             }
             .moveFromLeft{
               animation:moveFromLeft 0.5s ease 1;
               -moz-animation:moveFromLeft 0.5s ease 1; /* Firefox */
               -webkit-animation:moveFromLeft 0.5s ease 1; /* Safari and Chrome */
               -o-animation:moveFromLeft 0.5s ease 1; /* Opera */
             }
             .moveToRight{
               animation:moveToRight 0.5s ease 1;
               -moz-animation:moveToRight 0.5s ease 1; /* Firefox */
               -webkit-animation:moveToRight 0.5s ease 1; /* Safari and Chrome */
               -o-animation:moveToRight 0.5s ease 1; /* Opera */
             }

             @-webkit-keyframes moveToLeft {
                 to { -webkit-transform: translateX(-100%); }
             }
             @-moz-keyframes moveToLeft {
                 to { -moz-transform: translateX(-100%); }
             }
             @keyframes moveToLeft {
                 to { transform: translateX(-100%); }
             }
             @-webkit-keyframes moveFromLeft {
                 from { -webkit-transform: translateX(-100%); }
             }
             @-moz-keyframes moveFromLeft {
                 from { -moz-transform: translateX(-100%); }
             }
             @keyframes moveFromLeft {
                 from { transform: translateX(-100%); }
             }

             @-webkit-keyframes moveToRight {
                 to { -webkit-transform: translateX(100%); }
             }
             @-moz-keyframes moveToRight {
                 to { -moz-transform: translateX(100%); }
             }
             @keyframes moveToRight {
                 to { transform: translateX(100%); }
             }

             @-webkit-keyframes moveFromRight {
                 from { -webkit-transform: translateX(100%); }
             }
             @-moz-keyframes moveFromRight {
                 from { -moz-transform: translateX(100%); }
             }
             @keyframes moveFromRight {
                 from { transform: translateX(100%); }
             }

keyframes样式定义

 $(document).ready(function(){
                 $(".brand-slide-bg").children("p").bind('webkitAnimationStart', function() {
                    $(this).parent(".brand-slide-bg").attr("is-animating",true);
                 });
                 $(".brand-slide-bg").children("p").bind('webkitAnimationEnd', function() {
                     if($(this).hasClass("moveToLeft")){
                       $(this).removeClass("page-current");
                       $(this).removeClass("moveToLeft");
                     }
                     if($(this).hasClass("moveToRight")){
                       $(this).removeClass("page-current");
                       $(this).removeClass("moveToRight");
                     }
                     if($(this).hasClass("moveFromRight")){
                       $(this).addClass("page-current");
                       $(this).removeClass("moveFromRight");
                     }
                     if($(this).hasClass("moveFromLeft")){
                       $(this).addClass("page-current");
                       $(this).removeClass("moveFromLeft");
                     }
                     $(this).parent(".brand-slide-bg").attr("is-animating",false);
                 });
                 $(".arrow-right").click(function() {
                     slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");
                     moveLittlePage(slide_div,"right","moveFromLeft","moveToRight");
                 });
                 $(".arrow-left").click(function() {
                     slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");
                     moveLittlePage(slide_div,"left","moveFromRight","moveToLeft");
                 });
                 page_auto_move();
             });

             function page_auto_move(){
                 $(".brand-slide-bg").each(function(){
                     moveLittlePage($(this),"right","moveFromLeft","moveToRight");
                 });
                 setTimeout("page_auto_move()",2000);
             }
             function moveLittlePage(slide_div,way,from_css,to_css){
                 if(slide_div.attr("is-animating")=="true"){return;}//动画未结束不能开始
                 var current_css="page-current";
                 var current_p=slide_div.children(".page-current");
                 current_p.addClass(to_css);
                 if(way=="left"){
                     if (current_p.next().length<=0) {
                         slide_div.children().first().addClass(from_css);
                         slide_div.children().first().addClass(current_css);
                     }else{
                         current_p.next().addClass(from_css);
                         current_p.next().addClass(current_css);
                     }
                 }else if(way=="right"){
                     if (current_p.prev().length<=0) {
                         slide_div.children().last().addClass(from_css);
                         slide_div.children().last().addClass(current_css);
                     }else{
                         current_p.prev().addClass(from_css);
                         current_p.prev().addClass(current_css);
                     }
                 }
             }

keyframes完整版js方法

最终我采用了css3得keyframes方法，源代码传送门：https://github.com/HappyBangs/bang_plugins/tree/master/plugin-p-slide