进阶任务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

版权声明:本教程版权归邓攀和饥人谷所有,转载须说明来源!!!!

你可能感兴趣的:(进阶任务17)