广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

简要教程　　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();函数。