Karrot Slider是一款純Javascript和CSS3制作的自動播放的幻燈片插件。該幻燈片沒有任何外部依賴，內(nèi)置有8種不同的動畫過渡效果。該幻燈片支持響應(yīng)式圖片設(shè)計模式，也可以制作為全屏幻燈片模式。
使用該幻燈片插件需要引入slider.css和sliderEffects.js文件。
- <link href="css/slider.css" rel="stylesheet" type="text/css" />
- <script src="js/sliderEffects.js"></script>
HTML結(jié)構(gòu)
創(chuàng)建一個帶ID號的<div>，然后設(shè)置它的寬度和高度，并將第一張圖片放置在這個<div>中。
- <div id="slider" style="width: 900px; height: 505px; margin: auto;">
- <img src="images/1.jpg" >
- </div>
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");
初始化插件
要初始化該幻燈片插件，可以創(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;
然后創(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;
- }
最后使用setInterval()函數(shù)來調(diào)用這個函數(shù)。
- setInterval(function () { karrotSlider() } , timing);
如果你喜歡這個插件，那么你可能也喜歡:
純CSS3超酷全屏響應(yīng)式幻燈片特效
純CSS3炫酷全屏百葉窗效果幻燈片特效
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請注明出處：http://www.htmleaf.com/jQuery/Sl ... r/201508142409.html
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。