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;
