简要教程
karrot slider是一款纯javascript和css3制作的自动播放的幻灯片插件。该幻灯片没有任何外部依赖，内置有8种不同的动画过渡效果。该幻灯片支持响应式图片设计模式，也可以制作为全屏幻灯片模式。
使用方法
使用该幻灯片插件需要引入slider.css和sliderEffects.js文件。
复制代码
HTML结构 创建一个带ID号的，然后设置它的宽度和高度，并将第一张图片放置在这个
中。
复制代码
立即学习“前端免费学习笔记（深入）”；
8种内置过渡动画效果的使用 该幻灯片内置了8种不同的动画过渡效果：
Dissolve
Slide Up
Slide Down
Slide Left
Slide Right
Mosaic
Window
Doors
所有的效果函数都包含2个参数，第一个是当前图片的引用，第二个是下一张图片的引用。
//effect(current, next);
KSDissolve("images/1.jpg", "images/2.jpg");
KSSlideUp("images/1.jpg", "images/2.jpg");
KSSlideDown("images/1.jpg", "images/2.jpg");
KSSlideLeft("images/1.jpg", "images/2.jpg");
KSSlideRight("images/1.jpg", "images/2.jpg");
KSMosaic("images/1.jpg", "images/2.jpg");
KSWindows("images/1.jpg", "images/2.jpg");
KSDoors("images/1.jpg", "images/2.jpg");复制代码
立即学习“前端免费学习笔记（深入）”；
初始化插件 要初始化该幻灯片插件，可以创建3个变量：一个图片数组，图片显示的时间和当前图片的下标。 var images = ["images/1.jpg" , "images/2.jpg" , "images/3.jpg", "images/4.jpg" ]; var timing = 3000; var currentImg = 1;
复制代码
立即学习“前端免费学习笔记（深入）”；
然后创建一个函数来选择下一张图片，并可以设置过渡到下一张图片时的动画效果。
function karrotSlider() {
var nextimg = (currentImg + 1) > images.length ? 1 : currentImg + 1 ;
var effect = Math.floor (Math.random()*6 +1 );
switch (effect) {
case 1:
KSDissolve(images[currentImg- 1], images[nextimg- 1])
break;
case 2:
KSSlideUp(images[currentImg- 1], images[nextimg- 1])
break;
case 3:
KSSlideDown(images[currentImg- 1], images[nextimg- 1])
break;
case 4:
KSSlideLeft(images[currentImg- 1], images[nextimg- 1])
break;
case 5:
KSSlideRight(images[currentImg- 1], images[nextimg- 1])
break;
case 6:
KSMosaic(images[currentImg- 1], images[nextimg- 1])
break;
case 7:
KSWindows(images[currentImg- 1], images[nextimg- 1])
break;
case 8:
KSDoors(images[currentImg- 1], images[nextimg- 1])
break;
}
currentImg = (currentImg + 1) > images.length ? 1 : currentImg + 1;
}复制代码
立即学习“前端免费学习笔记（深入）”；
最后使用setInterval()函数来调用这个函数。
setInterval(function () { karrotSlider() } , timing); 注意：所有的图片必须尺寸相同。如果想制作全屏幻灯片，可以在body结束之前调用fullScreen();函数。
