纯js和CSS3炫酷自动幻灯片特效

时间：2016-03-09
　　简要教程
　　Karrot Slider是一款纯Javascript和CSS3制作的自动播放的幻灯片插件。该幻灯片没有任何外部依赖，内置有8种不同的动画过渡效果。该幻灯片支持响应式图片设计模式，也可以制作为全屏幻灯片模式。

1.jpg
查看演示     下载插件
　　使用方法
　　使用该幻灯片插件需要引入slider.css和sliderEffects.js文件。
  1. <link href="css/slider.css" rel="stylesheet" type="text/css" />
  2. <script src="js/sliderEffects.js"></script>      
复制代码

　　HTML结构
　　创建一个带ID号的<div>，然后设置它的宽度和高度，并将第一张图片放置在这个<div>中。
  1. <div id="slider" style="width: 900px; height: 505px; margin: auto;">
  2.   <img src="images/1.jpg" >
  3. </div>         
复制代码

　　8种内置过渡动画效果的使用

　　该幻灯片内置了8种不同的动画过渡效果：

  • 　　Dissolve
  • 　　Slide Up
  • 　　Slide Down
  • 　　Slide Left
  • 　　Slide Right
  • 　　Mosaic
  • 　　Window
  • 　　Doors

　　所有的效果函数都包含2个参数，第一个是当前图片的引用，第二个是下一张图片的引用。
  1. //effect(current, next);
  2. KSDissolve("images/1.jpg", "images/2.jpg");
  3. KSSlideUp("images/1.jpg", "images/2.jpg");
  4. KSSlideDown("images/1.jpg", "images/2.jpg");
  5. KSSlideLeft("images/1.jpg", "images/2.jpg");
  6. KSSlideRight("images/1.jpg", "images/2.jpg");
  7. KSMosaic("images/1.jpg", "images/2.jpg");
  8. KSWindows("images/1.jpg", "images/2.jpg");
  9. KSDoors("images/1.jpg", "images/2.jpg");            
复制代码

　　初始化插件
　　要初始化该幻灯片插件，可以创建3个变量：一个图片数组，图片显示的时间和当前图片的下标。
  1. var images = ["images/1.jpg" , "images/2.jpg" , "images/3.jpg", "images/4.jpg" ];
  2. var timing = 3000;
  3. var currentImg = 1;     
复制代码

　　然后创建一个函数来选择下一张图片，并可以设置过渡到下一张图片时的动画效果。
  1. function karrotSlider() {

  3. var nextimg = (currentImg + 1) > images.length ? 1 : currentImg + 1 ;
  4. var effect = Math.floor (Math.random()*6 +1 );

  6. switch (effect) {
  7.   case 1:
  8.    KSDissolve(images[currentImg- 1], images[nextimg- 1])
  9.    break;
  10.   case 2:
  11.    KSSlideUp(images[currentImg- 1], images[nextimg- 1])
  12.    break;
  13.   case 3:
  14.    KSSlideDown(images[currentImg- 1], images[nextimg- 1])
  15.    break;
  16.   case 4:
  17.    KSSlideLeft(images[currentImg- 1], images[nextimg- 1])
  18.    break;
  19.   case 5:
  20.    KSSlideRight(images[currentImg- 1], images[nextimg- 1])
  21.    break;
  22.   case 6:
  23.    KSMosaic(images[currentImg- 1], images[nextimg- 1])
  24.    break;
  25.   case 7:
  26.    KSWindows(images[currentImg- 1], images[nextimg- 1])
  27.    break;
  28.   case 8:
  29.    KSDoors(images[currentImg- 1], images[nextimg- 1])
  30.    break;
  31. }

  33. currentImg = (currentImg + 1) > images.length ? 1 : currentImg + 1;

  35. }               
复制代码

　　最后使用setInterval()函数来调用这个函数。
  1. setInterval(function () { karrotSlider() } , timing);     
复制代码
　　注意：所有的图片必须尺寸相同。如果想制作全屏幻灯片，可以在body结束之前调用fullScreen();函数。

　　如果你喜欢这个插件，那么你可能也喜欢:

　　纯CSS3超酷全屏响应式幻灯片特效

　　纯CSS3炫酷全屏百叶窗效果幻灯片特效

　　 本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/Sl ... r/201508142409.html

上一篇：SVG进阶 | SVG剪裁路径 下一篇：HTML5技术秀：你的3D立体旋转名字

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权