html幻灯片效果需要js吗,html5页面中纯js和CSS3实现炫酷自动幻灯片特效的方法

html5页面中纯js和CSS3实现炫酷自动幻灯片特效的方法

发布时间：2021-02-14 18:14:12

来源：亿速云

阅读：104

作者：小新

小编给大家分享一下html5页面中纯js和CSS3实现炫酷自动幻灯片特效的方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

使用方法

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

HTML结构　　创建一个带ID号的

，然后设置它的宽度和高度，并将第一张图片放置在这个

中。

 

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();函数。

看完了这篇文章，相信你对“html5页面中纯js和CSS3实现炫酷自动幻灯片特效的方法”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！