简要教程
karrot slider是一款纯javascript和css3制作的自动播放的幻灯片插件。该幻灯片没有任何外部依赖，内置有8种不同的动画过渡效果。该幻灯片支持响应式图片设计模式，也可以制作为全屏幻灯片模式。
使用方法
使用该幻灯片插件需要引入slider.css和slidereffects.js文件。
<link href="css/slider.css?7.1.33" rel="stylesheet" type="text/css" />
<script src="js/slidereffects.js?7.1.33"></script>
复制代码
html结构创建一个带id号的<p>，然后设置它的宽度和高度，并将第一张图片放置在这个<p>中。
<p id="slider" style="width: 900px; height: 505px; margin: auto;">
<img src="images/1.jpg" >
</p>
复制代码
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();函数。