轮播VS渐变轮播

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

1.固定包裹图片的父容器的宽度,overflow :hidden属性规定当内容溢出元素框时隐藏
2.多张图片浮动,排成一排,设置,通过改变left值,实现偏移
3.方法
pre():上一页就是一排图片向右移动,left增加
next():下一页就是一排图片向左移动,left减小
4.定义全局属性$curIndex,记录当前显示图片的index.
判断第一张和最后一张的偏移
5.下图和代码结合看:理解最后一张和第一张怎么衔接流畅

衔接不卡顿原理图

//以下一页为例,下一页就是一排图片向左移动,left减小
//当点击最后一页,几乎同时完成两个动作,一是偏移一个图片宽度,二是把包裹图片容器的left设置为下一张克隆图片原来的left的值,这样就是一个循环,而且看不出图片突然移动.
 function next(idx){
            $imgCt.animate({
                left: "-="+idx*$imgWidth//点击下一页,偏移一个图片宽度
            },function(){
                $curIndex += idx;
                if($curIndex >= $imgLen){                 
                    $imgCt.css({left: -$imgWidth});
                    $curIndex = 0;
                }
                $imgLock = true;
                setBullet()
            })
        }

function pre(idx){
            $imgCt.animate({
                left:'+='+$imgWidth//图片右移,left增加
            },function(){
                $curIndex = curIndex - idx;//0 - 1
                if($curIndex <0){//在第一张时点击上一张
                    $imgCt.css({left:-$imgLen*$imgWidth});//迅速左移图片
                }
            })
        }

2.实现左右滚动无限循环轮播效果

代码

偏移原理:利用包裹图片的容器left值即:$imgCt.css('left'),偏移距离总是图片宽度的整数倍的数字作为索引.

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

代码

原理: setInterval();clearInterval();fadeIn;fadeOut;