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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 纯js和CSS3炫酷自动幻灯片特效
纯js和CSS3炫酷自动幻灯片特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-08-14
    阅读:
简要教程

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

使用方法

使用该幻灯片插件需要引入slider.css和sliderEffects.js文件。

<link href="css/slider.css" rel="stylesheet" type="text/css" /> 
<script src="js/sliderEffects.js"></script>               
              
HTML结构

创建一个带ID号的<div>,然后设置它的宽度和高度,并将第一张图片放置在这个<div>中。

<div id="slider" style="width: 900px; height: 505px; margin: auto;"> 
  <img src="images/1.jpg" > 
</div>                
              
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);