有的朋友可能对于“纯js和CSS3炫酷自动幻灯片特效 超炫酷css3登录界面”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

简要教程
　　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("https://www.php.cn/images/1.jpg", "images/2.jpg");
KSSlideUp("https://www.php.cn/images/1.jpg", "images/2.jpg");
KSSlideDown("https://www.php.cn/images/1.jpg", "images/2.jpg");
KSSlideLeft("https://www.php.cn/images/1.jpg", "images/2.jpg");
KSSlideRight("https://www.php.cn/images/1.jpg", "images/2.jpg");
KSMosaic("https://www.php.cn/images/1.jpg", "images/2.jpg");
KSWindows("https://www.php.cn/images/1.jpg", "images/2.jpg");
KSDoors("https://www.php.cn/images/1.jpg", "images/2.jpg");

复制代码

　初始化插件　　要初始化该幻灯片插件，可以创建3个变量：一个图片数组，图片显示的时间和当前图片的下标。
var images = ["https://www.php.cn/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();函数。
　　

微信

分享

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关标签：HTML5教程 HTML5中国 纯js和CSS3炫酷自动幻灯片特效 html5cn html5资料 html5文章 ht

• 上一篇：HTML5 中canvas支持触摸屏的签名面板
• 下一篇：SVG进阶|SVG剪裁路径

以上就是“纯js和CSS3炫酷自动幻灯片特效 超炫酷css3登录界面”的详细内容，更多请关注77isp云服务器技术网其它相关文章！