簡要教程

Karrot Slider是一款純Javascript和CSS3制作的自動播放的幻燈片插件。該幻燈片沒有任何外部依賴，內(nèi)置有8種不同的動畫過渡效果。該幻燈片支持響應(yīng)式圖片設(shè)計模式，也可以制作為全屏幻燈片模式。

使用方法

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

復(fù)制代碼HTML結(jié)構(gòu)　　創(chuàng)建一個帶ID號的

，然后設(shè)置它的寬度和高度，并將第一張圖片放置在這個

中。

復(fù)制代碼8種內(nèi)置過渡動畫效果的使用　　該幻燈片內(nèi)置了8種不同的動畫過渡效果：

Dissolve

Slide Up

Slide Down

Slide Left

Slide Right

Mosaic

Window

Doors

所有的效果函數(shù)都包含2個參數(shù)，第一個是當(dāng)前圖片的引用，第二個是下一張圖片的引用。

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

復(fù)制代碼初始化插件　　要初始化該幻燈片插件，可以創(chuàng)建3個變量：一個圖片數(shù)組，圖片顯示的時間和當(dāng)前圖片的下標(biāo)。

var images = ["images/1.jpg" , "images/2.jpg" , "images/3.jpg", "images/4.jpg" ];

var timing = 3000;

var currentImg = 1;

復(fù)制代碼然后創(chuàng)建一個函數(shù)來選擇下一張圖片，并可以設(shè)置過渡到下一張圖片時的動畫效果。

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;

}

復(fù)制代碼最后使用setInterval()函數(shù)來調(diào)用這個函數(shù)。

setInterval(function () { karrotSlider() } , timing);

注意：所有的圖片必須尺寸相同。如果想制作全屏幻燈片，可以在body結(jié)束之前調(diào)用fullScreen();函數(shù)。

總結(jié)

以上是生活随笔為你收集整理的js css自动幻灯片切换,纯js和CSS3炫酷自动幻灯片特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。