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);
如果你喜歡這個插件，那么你可能也喜歡:
純CSS3超酷全屏響應式幻燈片特效
純CSS3炫酷全屏百葉窗效果幻燈片特效
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/jQuery/Sl ... r/201508142409.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。