进阶任务17

1、 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

• 轮播的实现原理：首先将需要做轮播的图片放在一排上并排排列；然后把首尾两张图片克隆后分别放到最末和最前；其次通过jquery的animate函数来实现滚动；当图片滚动到最后一张再往后滚动时，再利用juqery的css将其位置跳转到第一张图片；当图片滚动到第一张图片再往前滚动时，利用juqery的css将其位置跳转到最后一张图片。这样便实现了轮播的无限滚动
• 函数如下代码所示：

function playNext(index){
               if(isAnimate){
                   return;
               }
               isAnimate = true;
               $imgCt.animate({
                   left: "-=" + index * imgWidth
               },1000,function(){
                   curImgIndex += index;
                   if(curImgIndex === imgCount){
                       $imgCt.css("left",-imgWidth);
                       curImgIndex = 0;
                   }
                   isAnimate = false;
                   setBullet();
               });
           }
           function playPre(index){
               if(isAnimate){
                   return;
               }
               isAnimate = true;
               $imgCt.animate({
                   left: "+=" + index * imgWidth
               },1000,function(){
                   curImgIndex -= index;
                   if(curImgIndex < 0){
                       $imgCt.css("left",-imgWidth * imgCount);
                       curImgIndex = imgCount - 1;
                   }
                   isAnimate = false;
                   setBullet();
               })
           }
           function setBullet(){
               $bullet.children("li").removeClass("active")
                                     .eq(curImgIndex)
                                     .addClass("active");
           }
           function autoPlay(){
               clock = setInterval(function(){
                   playNext(1);
               },2500);
           }

---

2、实现视频中的左右滚动无限循环轮播效果

• 无限循环轮播效果
• 代码github

---

3、实现一个渐变轮播效果

• 渐变轮播效果
• 代码github

版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！