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

PetitQ 幻灯片/轮播 2018-11-08 1.97K 0 1

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);

注意：所有的图片必须尺寸相同。如果想制作全屏幻灯片，可以在 body 结束之前调用 fullScreen();函数。

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

已有 493 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

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

使用方法：

HTML 结构：

初始化插件：

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

相关文章

Jcircle - 响应式圆形轮播图插件

jQuery和CSS3堆叠式轮播图特效

jQuery超酷hero幻灯片特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法：

HTML 结构：

初始化插件：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复