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、实现视频中的左右滚动无限循环轮播效果
3、实现一个渐变轮播效果
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
